Создание и оптимизация SVG иконок
В этой статье описывается процесс создания иконок для сайта в различных вариантах исполнения и оптимизация кода итоговых файлов SVG. Цель: получить иконки минимального размера, найти оптимальные пути для создания иконок и разобраться в особенностях работы векторного редактора Figma. Для примера будет использоваться минималистичная версия иконки для соцсети ВКонтакте, но все шаги и выводы можно будет применять на других иконках.
Создание иконок в векторном редакторе Figma
Размер иконки
Выбор размера холста (Frame), в котором будет отрисована иконка, влияет на размер итогового SVG-файла и на удобство рисования. На сайте я использую иконки размером 30×30 пкс, поэтому для начала попробовал нарисовать иконки в таком же размере 30×30, только размер фрейма взял чуть больше — 32×32. Небольшой запас по 1 пкс с каждой стороны может пригодиться при изменении толщины обводки у фигур, а также как отступы до соседних элементов.
Несмотря на очень упрощённый вид логотипа “vk” некоторые точки и кривые все-таки пришлось установить посередине между пикселями. Это приводит к тому, что в коде SVG такие точки будут записываться как нецелые числа, через точку (например “8.5”). А наличие таких нецелых чисел приводит к лишним символам в коде и раздуванию размера файла.
В нашем случае можно легко избавиться от нецелых чисел — просто увеличиваем размер холста в два раза, до 64×64 пкс. Тогда все “половинные” пиксели превращаются в целые (например было “8.5”, а стало “17” — минус один символ и один байт). В результате этого действия мы сократили размер нашего файла с 278 байт до 271 байта (это 97,48% от первого варианта, минус 2,52%). Для более сложных иконок будет лучше брать ещё больший размер холста, но желательно не более чем 100×100 пкс — иначе в коде появятся трёхзначные числа.
Варианты создания иконок
Иконка состоит из двух контуров (круг и логотип vk) и одного-двух цветов (плюс прозрачный цвет). И в редакторе и формате SVG такую иконку можно сделать разными способами и в разных стилях. С заливкой цветом или с обводкой, с двумя или с одной фигурой-элементом, с закруглениями углов и т. д. В зависимости от дизайна и целей может подойти разный вариант.
Базовый вариант, на основе которого будут создаваться остальные. Рисуется фигура Круг (Circle) с заливкой синим фоном и сверху фигура Путь (Path) для логотипа “vk” с заливкой белым фоном.
Аналогично первому варианту, только фигура круг заменяется на путь. Для этого можно перейти в режим редактирования фигуры (Edit Object) и внести минимальные изменения. Я немного сместил кривые, а после сохранения файла вернул прежние значения (какие соответствуют кругу).
Контуры круга и логотипа объединяем в один элемент путь. Выделить обе фигуры > ПКМ > Flatten. Далее в режиме редактирования элемента делаем заливку цветом для области между кругом и лого, а сами буквы логотипа делаем прозрачными.
Два отдельных элемента круг и путь, каждый без заливки, с чёрной обводкой в 1 пкс.
Отличается от первой иконки тем, что у фигур убраны заливки и добавлены обводки толщиной 1 пкс, черным цветом. В этом примере фигма некорректно конвертирует рисунок в SVG-файл, отчего элемент путь вместо простой чёрной линии в 1 пиксель превращается в сложнейшую фигуру вокруг этой линии с чёрной заливкой.Один элемент путь и для круга и для логотипа, без заливки, с чёрной обводкой в 1 пкс.
Та же ошибка экспорта из фигмы как и в четвёртом варианте.Один элемент путь и для круга и для логотипа, без заливки, с чёрной обводкой в 1 пкс, добавлено скругление углов.
Несмотря на то что в фигме это был один элемент путь — после сохранения в SVG получились два элемента для круга и лого отдельно, каждый с дублирующимися атрибутами обводки и скругления.
Оптимизация SVG файлов
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64">
<circle cx="32" cy="32" r="30" fill="#3476C5"/>
<path d="M18 20h-8s2 24 26 24v-3l3-4 7 7h8L43 33l11-13h-8L36 32V20h-8v15c-9-3-10-15-10-15z" fill="#fff"/>
</svg>
Примечание: в данном примере для наглядности добавлена бьютификация кода (переносы строк и отступы).
№ | Вариант иконки | Размер SVG после экспорта | Размер SVG после оптимизации |
---|---|---|---|
1 | circle fill path fill | 271 byte | ? byte (? %) |
2 | path fill path fill | 364 byte | ? byte (? %) |
3 | path fill | 378 byte | ? byte (? %) |
4 | circle stroke path stroke | 3 252 byte (баг) | ? byte (? %) |
5 | path stroke | 271 byte | ? byte (? %) |
6 | path stroke join | 452 byte | ? byte (? %) |
7 | circle stroke fill path stroke fill | 3 387 byte (баг) | ? byte (? %) |
Сравнения и выводы
Оптимизацию кода SVG после векторного редактора лучше проводить сначала вручную, убирая грубые ошибки экспортирования и намечая стратегию упрощения координатных точек. Далее можно прогнать файл через оптимизатор SVGO (с максимальными настройками). А после ещё раз пройтись вручную и поправить то, что не нравится и вернуть то чего не хватает.