Как сделать SVG в Adobe Illustrator
Векторный формат SVG, по нынешним временам, — лучший формат для иконок сайтов.
Иконки в формате SVG весят мало, масштабируются без потери качества, их легко анимировать и настраивать реакцию на разные события (подведение курсора,нажатие и т.п.)
Чтобы итоговый файл SVG был минимального размера и с ним было удобно работать вебмастеру, при работе с векторным изображением в Adobe Illustrator придерживайтесь следующих правил.
- Именуйте слои понятно (названием иконки) и удаляйте лишние слои.
- Делайте Artboard такого же размера, как и изображение:
Object→Artboards→Fit to Artwork Bounds. Исключение — если объект состоит не из контуров с заливкой, а из линий с заданной толщиной обводки — тогда обводка может выходить за пределы Artboard. В этом случае нужно подгонять размер векторного изображения под Artboard на глаз. - Упрощайте кривые:
Object→Path→Simplify - Объединяйте контуры:
Window→Pathfinder(Ctrl-Shift-F9) →Unite - Конвертируйте линии с толщиной обводки в контуры с заливкой:
Object→Expand…. Это делает SVG чуть более тяжелым и менее удобным для анимации, но более совместимым (одинаково отображающимся в разных браузерах и при разных размерах).
Сохраняйте из Adobe Illustrator в SVG через экспорт: File → Export → Export As….
В SVG Options выбирайте такие настройки:
- Styling: Internal CSS
- Object IDs: Layer Names
- Decimal: 1 — чем меньше значение, тем меньше размер файла (минимальное значение — 1); а чем больше, тем точнее расположение элементов.
- Если вебмастер потом будет править цвет или работать с анимацией — уберите галочку Minify. Код SVG станет чуть тяжелее, но будет более читабельным и удобным для работы.
См. также: