Анимированная SVG-маска своими руками

Как сделать простую анимированную SVG-фигуру и использовать её как маску? Читать далее Анимированная SVG-маска своими руками

Как работает SVG ID?

Я много рассказывал о теге <use> в SVG и использовал его для вывода иконок. Прелесть в том, что с помощью <use> можно ссылаться на часть SVG и выводить только её. Это позволяет использовать схему «много изображений за один запрос, потому что это суперэффективно», которую раньше решали с помощью CSS-спрайтов и иконочных шрифтов. Читать далее Как работает SVG ID?

Синтаксис SVG «path»: иллюстрированное руководство

Элемент <path> в SVG является основным способом рисования. С помощью него можно нарисовать всё что угодно! Я слышал, что на самом деле все другие элементы для рисования, в конечном счёте, используют path. Он имеет один атрибут для описания того, что рисуется: аттрибут <d>. Его значение — это мини-синтаксис и он выглядит довольно непонятно: это длинная строка с кучей цифр и букв. Я не эксперт, но решил поковыряться в нём. Читать далее Синтаксис SVG «path»: иллюстрированное руководство

Gulp: инструкция для начинающих

Настройка сборщика для сборки Pug/Stylus, создания SVG-спрайтов и ещё чего-то там. Если интересно — читай.
Читать далее Gulp: инструкция для начинающих

Создание SVG-спрайта вручную

Как создать SVG-спрайт вручную, без сборщиков, онлайн-сервисов и геморроя. Ах, да! Без регистрации и СМС. Читать далее Создание SVG-спрайта вручную