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

Дивись також: