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