Як зробити 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 стане трохи важчий, але буде більш читабельним та зручним для роботи.
Дивись також: