Как сделать 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 чуть более тяжелым и менее удобным для анимации, но более совместимым (одинаково отображающимся в разных браузерах и при разных размерах).