Сайт должен одинаково хорошо выглядеть независимо от размера устройства и плотности пикселей. Этого можно достичь с помощью формата векторной графики — SVG. SVG-графику удобно использовать для иконок. В этой статье расскажем, как создать SVG-иконку.

1. Для создания иконок лучше использовать программы Photoshop или Figma.



Photoshop — платная программа.

  Figma имеет бесплатную начальную версию. Может работать в браузере.

2. Создавая иконку, нужно учитывать размер поля, в которое она будет помещена. В данном случае 40 х 40 px:

Если иконка будет больше этого поля, то она уменьшится, и линии будут нечеткими.

3. В идеальной иконке должно быть 2 слоя. Первый слой с прозрачностью 100%, второй — 10%. Но слоев может быть больше. Все зависит от сложности иконки и инструментов, которыми она нарисована.

4. После того, как иконка нарисована, все слои, из которых она состоит, нужно поместить в группу в Photoshop. В Figma нужно поместить в группу или фрейм.

Photoshop — группа.

Figma — фрейм.


Figma — группа.




5. Затем экспортируйте иконку в формат SVG.

Photoshop

Кликните правой кнопкой мыши по группе с иконкой. Выберите Export as.



Убедитесь, что выбран формат SVG и нажмите Export All.

Figma

Выделите фрейм или группу с иконкой. В правой панели в блоке Export выберите SVG и нажмите Export.



6. Проверьте иконку в браузере. Все линии и фигуры в иконке должны быть в теге <path>. Не должно быть тегов, например, <rect> (Инструмент «Rectangle» в Figma) или <circle> (Иструмент «Ellipse» в Figma). Иначе иконка не будет краситься в цвет темы.




Если эти теги есть, то нужно вернуться и изменить так, чтобы был <path>. Например, <rect> изменить на <path> в Figma, нарисовав прямоугольник не инструментом «Rectangle», а инструментом «Pen».