Создание и оптимизация 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 такую иконку можно сделать разными способами и в разных стилях. С заливкой цветом или с обводкой, с двумя или с одной фигурой-элементом, с закруглениями углов и т. д. В зависимости от дизайна и целей может подойти разный вариант.

1. Базовый вариант, на основе которого будут создаваться остальные. Рисуется фигура Круг (Circle) с заливкой синим фоном и сверху фигура Путь (Path) для логотипа “vk” с заливкой белым фоном.

2. Аналогично первому варианту, только фигура круг заменяется на путь. Для этого можно перейти в режим редактирования фигуры (Edit Object) и внести минимальные изменения. Я немного сместил кривые, а после сохранения файла вернул прежние значения (какие соответствуют кругу).

3. Контуры круга и логотипа объединяем в один элемент путь. Выделить обе фигуры > ПКМ > Flatten. Далее в режиме редактирования элемента делаем заливку цветом для области между кругом и лого, а сами буквы логотипа делаем прозрачными.

4. Два отдельных элемента круг и путь, каждый без заливки, с чёрной обводкой в 1 пкс.
   Отличается от первой иконки тем, что у фигур убраны заливки и добавлены обводки толщиной 1 пкс, черным цветом. В этом примере фигма некорректно конвертирует рисунок в SVG-файл, отчего элемент путь вместо простой чёрной линии в 1 пиксель превращается в сложнейшую фигуру вокруг этой линии с чёрной заливкой.

5. Один элемент путь и для круга и для логотипа, без заливки, с чёрной обводкой в 1 пкс.
   Та же ошибка экспорта из фигмы как и в четвёртом варианте.

6. Один элемент путь и для круга и для логотипа, без заливки, с чёрной обводкой в 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 после векторного редактора лучше проводить сначала вручную, убирая грубые ошибки экспортирования и намечая стратегию упрощения координатных точек. Далее можно прогнать файл через оптимизатор SVGO (с максимальными настройками). А после ещё раз пройтись вручную и поправить то, что не нравится и вернуть то чего не хватает.