SVG из Illustrator: какие настройки экспорта выбрать для веба
Иконка весом 2 КБ в макете превращается в 40 КБ кода после экспорта — и всё из-за настроек, которые никто не проверял. SVG в Illustrator имеет десяток опций, и каждая влияет либо на вес, либо на поведение файла в браузере.
Разберём их по официальной документации.
Два пути: Save As и Export As
Оба умеют SVG, но задачи разные.
Save As / Save A Copy сохраняет документ в формате SVG с полным набором опций. По документации именно этот путь даёт доступ к полному набору параметров SVG.
File → Export → Export As — отдельный сценарий, ориентированный на веб и экран. По документации он создаёт стандартизированные, оптимизированные для веба SVG.
Разница на практике: Save As ближе к «сохранить проект», Export As — к «отдать в разработку». Для иконок и логотипов в вебе обычно нужен Export As.
Styling: как хранится оформление
Документация перечисляет три варианта:
- Internal CSS — один тег с CSS-классами, стили общие для объектов с одинаковым оформлением. Может дать меньший размер файла.
- Inline Style — атрибут
styleна каждом теге, все свойства собраны в CSS-синтаксисе. - Presentation Attributes — отдельные XML-атрибуты для каждого свойства. Этот формат обязателен для SVG в Android Studio.
Как выбирать:
- веб-иконки — Internal CSS или Presentation Attributes, если нужна максимальная совместимость;
- анимация через CSS — Inline Style или Internal CSS удобнее;
- Android — только Presentation Attributes.
Шрифт: кривые или текст
Опция Font определяет, как представлены шрифты. Документация отмечает: Outlines сохраняют контуры и наиболее совместимы.
Практика:
- логотип и иконка — в кривые: не будет зависимости от шрифта;
- текст, который должен остаться текстом (SEO, доступность, перевод) — оставить текстом, но принять риск подмены шрифта.
Для логотипа в кривых нет альтернативы: иначе на чужой машине он отрисуется другим шрифтом.
Изображения: встроенные или связанные
Опция Images позволяет сохранить картинки внутри SVG или как внешние файлы.
Встроенные (embedded) увеличивают вес, но дают автономность. Связанные — легче, но требуют, чтобы файлы лежали рядом. Для иконок с растрами лучше вообще избегать растров: переведите в вектор.
Object IDs
Настройка задаёт, как назначаются имена объектов: Layer Names, Minimal или Unique.
Документация уточняет: опция определяет, как обрабатываются дубликаты имён и как объекты называются в экспортированном CSS.
Практика:
- Minimal — меньше кода, но имена нечитаемые;
- Layer Names — удобно, если разработчик будет анимировать части иконки;
- Unique — когда важна гарантия отсутствия конфликтов (например, при вставке нескольких SVG на страницу).
Decimal: точность против веса
Опция регулирует, сколько знаков после запятой сохраняется в координатах.
Документация формулирует компромисс прямо: больше знаков — выше точность расположения объектов и визуальная достоверность, но больше размер файла.
Практический ориентир:
- иконки — 1–2 знака;
- сложные иллюстрации — 2–3;
- печатные макеты — не экономьте.
Проверяйте результат глазами: на мелких элементах округление может «съесть» форму.
Minify
Опция удаляет пустые группы и лишние пробелы, уменьшая размер. Документация предупреждает: читаемость кода при этом падает.
Для продакшена — включайте. Для файла, который будет править другой дизайнер, — лучше выключить и отдать читаемую версию.
Прозрачный фон
Отдельное предупреждение из документации: Illustrator не экспортирует цвет фона монтажной области в SVG. Области без объектов остаются прозрачными.
Если в экспортированном файле появился фон — значит, в макете есть залитый объект, закрывающий монтажную область. Его нужно найти и скрыть или удалить.
Артборды
При экспорте можно:
- выгрузить каждый артборд отдельным файлом (Use Artboards);
- выгрузить все артборды в один файл (All);
- задать диапазон.
Для набора иконок это критично: один артборд — один файл, иначе вы получите один SVG со всеми иконками, что неудобно для спрайта.
Чек-лист перед отдачей
- Экспорт через Export As, а не Save As.
- Styling выбран под платформу.
- Шрифты переведены в кривые.
- Object IDs осмысленные.
- Decimal снижен до разумного.
- Minify включён для продакшена.
- Фон прозрачный.
- Файл открыт в браузере и проверен.
Частые ошибки
Отдавать SVG из Save As. В коде остаются служебные данные Illustrator, вес больше.
Забыть про Android. Presentation Attributes обязательны, иначе часть инструментов не примет файл.
Оставить текст текстом в логотипе. На чужой системе шрифт подменится.
Не проверить прозрачность. Лишний прямоугольник с заливкой убивает прозрачный фон.
Один артборд на все иконки. Получится один тяжёлый файл вместо набора.
Проверка результата в браузере
Экспортированный SVG стоит открыть не только в Illustrator, но и в браузере — именно там он будет жить:
- Перетащите файл в новую вкладку.
- Проверьте, что нет обрезанных краёв и лишних отступов.
- Увеличьте масштаб страницы: вектор должен оставаться резким.
- Посмотрите код: если внутри есть десятки пустых групп, поможет Minify или ручная чистка.
- Проверьте, что файл не тянет за собой внешние изображения, если вы рассчитывали на автономность.
Отдельно проверьте поведение при вставке в HTML: некоторые инструменты требуют, чтобы у корневого элемента был задан viewBox, иначе размеры «поедут».
FAQ
Чем Save As отличается от Export As для SVG?
Save As даёт полный набор опций и сохраняет совместимость с Illustrator, Export As создаёт веб-ориентированный файл. Для иконок в веб обычно нужен второй.
Почему SVG весит больше PNG?
Из-за лишних групп, высокой точности координат и служебных данных. Помогают Minify и снижение Decimal.
Какой Styling выбрать для Android?
Presentation Attributes — это требование для Android Studio.
Почему у SVG появился фон?
В макете есть залитый объект под всей монтажной областью: Illustrator не экспортирует цвет артборда, но экспортирует объекты.
Нужно ли переводить текст в кривые?
Для логотипов и иконок — да. Для текста, который должен читаться машиной, — нет.