Векторный формат SVG, по нынешним временам, — лучший формат для иконок сайтов.

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

Чтобы итоговый файл SVG был минимального размера и с ним было удобно работать вебмастеру, при работе с векторным изображением в Adobe Illustrator придерживайтесь следующих правил.

  • Именуйте слои понятно (названием иконки) и удаляйте лишние слои.
  • Делайте Artboard такого же размера, как и изображение: ObjectArtboardsFit to Artwork Bounds. Исключение — если объект состоит не из контуров с заливкой, а из линий с заданной толщиной обводки — тогда обводка может выходить за пределы Artboard. В этом случае нужно подгонять размер векторного изображения под Artboard на глаз.
  • Упрощайте кривые: ObjectPathSimplify
  • Объединяйте контуры: WindowPathfinder (Ctrl-Shift-F9) → Unite
  • Конвертируйте линии с толщиной обводки в контуры с заливкой: ObjectExpand…. Это делает SVG чуть более тяжелым и менее удобным для анимации, но более совместимым (одинаково отображающимся в разных браузерах и при разных размерах).

Сохраняйте из Adobe Illustrator в SVG через экспорт: FileExportExport As….
В SVG Options выбирайте такие настройки:

  • Styling: Internal CSS
  • Object IDs: Layer Names
  • Decimal: 1 — чем меньше значение, тем меньше размер файла (минимальное значение — 1); а чем больше, тем точнее расположение элементов.
  • Если вебмастер потом будет править цвет или работать с анимацией — уберите галочку Minify. Код SVG станет чуть тяжелее, но будет более читабельным и удобным для работы.

См. также: