Создание и оптимизация SVG иконок

Обновлено:
Автор: Олег Миторун

В этой статье описывается (разбирается, рассматривается?) процесс создания иконок для сайта в различных вариантах исполнения и оптимизация кода итоговых файлов SVG. Цель: получить иконки минимального размера, найти оптимальные пути (варианты?) для создания иконок и разобраться в особенностях работы векторного редактора Figma. Для примера будет использоваться (взята?) минималистичная версия иконки для соцсети ВКонтакте, но все шаги и выводы можно будет применять на любых других иконках.

Создание иконок в векторном редакторе Figma

Размер иконки

Выбор размера холста (Frame), в котором будет отрисована иконка, влияет на размер итогового SVG-файла и на удобство рисования. На сайте я использую иконки размером 30х30 пкс, поэтому для начала попробовал нарисовать иконки в таком же размере 30х30, только размер фрейма взял чуть больше – 32х32. Небольшой запас по 1 пкс с каждой стороны может пригодиться при изменении толщины обводки у фигур, а также как отступы до соседних элементов.

Отрисовка иконки в Figma.
Создание иконки в Figma

Несмотря на очень упрощенный вид логотипа "vk" некоторые точки и кривые все-таки пришлось установить (попали?) посередине между пикселями. Это приводит к тому, что в коде SVG такие точки будут записываться как нецелые числа, через точку (например "8.5"). А наличие таких нецелых чисел приводит к лишним символам в коде и раздуванию размера файла.

В нашем случае можно легко избавиться от нецелых чисел – просто увеличиваем размер холста в два раза, до 64х64 пкс. Тогда все "половинные" пиксели превращаются в целые (например было "8.5", а стало "17" – минус один символ и один байт). В результате этого действия мы сократили размер нашего файла с 278 байт до 271 байта (это 97,48% от первого варианта, минус 2,52%). Для более сложных иконок будет лучше брать еще больший размер холста, но желательно не более чем 100х100 пкс – иначе в коде появятся трехзначные числа.

Координатные точки иконки.
Координатные точки иконки

Варианты создания иконок

Иконка состоит из двух контуров (круг и логотип vk) и одного-двух цветов (плюс прозрачный цвет). И в редакторе и формате SVG такую иконку можно сделать разными способами и в разных стилях. С заливкой цветом или с обводкой, с двумя или с одной фигурой-элементом, с закруглениями углов и т.д. В зависимости от дизайна и целей может подойти (разный) вариант. (Мы создадим разные варианты, сравним их и выделим самые подходящие под разные задачи.)

6 вариантов иконок.
6 вариантов иконок
  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 после экспорта с фигмы Размер SVG после редактирования
(с width, height, xmlns)
1 circle fill
path fill
271 byte 241 byte
(88.9%)
2 path fill
path fill
364 byte 259 byte
(71.2%)
3 path fill 378 byte 253 byte
(66.9%)
4 circle stroke
path stroke
3 178 byte
(error?)
240 byte
(7.6%)
5 path stroke 3 458 byte
(error?)
264 byte
(7.6%)
6 path stroke join 414 byte 288 byte
(69.6%)

Сравнения и выводы

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