Мы давно собирались делать видео про SVG спрайты, и вот наконец-то случилось. Существует четыре классических способа использования (с CSS и JavaScript), которые мы и рассмотрим, а еще поговорим о способах практического их применения: анимации и работа с кучей иконок.
SVG
Весь контент про SVG — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML.
На этот раз мы рассмотрели использование таких новых технологий как CSS Clipping and Masking, которые позволяют обрезать и накладывать маску на HTML-элемент по определенным векторным (clip-path) и растровым (mask-image) паттернам и с помощью SVG.
Мы давно обещали сделать ролик про анимацию SVG элементов на страницах, но все как-то не удавалось. Сегодня мы наконец-то рады вам представить первый ролик из серии, в котором расскажем про варианты анимации SVG: с помощью CSS, SMIL и JavaScript (на примере Snap.svg).
Все чаще в кругах веб-дизайнеров можно услышать про векторную графику и использовании ее в веб-страницах в виде SVG изображений.
За последние пару лет было написано очень много статей на эту тему, SVG-анимации стали новым трендом. Не успели люди освоить работу с CSS-спрайтами, как уже все начали работу с векторными спрайтами с помощью удобного API.
