Как правильно сохранить SVG в Adobe Illustrator для веба

SVG (Scalable Vector Graphics) — векторный формат, который идеально подходит для использования на сайтах, так как не теряет качества при масштабировании и имеет небольшой размер. Adobe Illustrator позволяет настроить SVG-экспорт детально, поэтому важно понимать каждый пункт настроек.

Пошаговый экспорт SVG

В Adobe Illustrator:

• Нажмите File → Export → Export As.
• В окне выберите формат SVG и нажмите Export.
• Появится окно SVG Options с настройками, которые нужно рассмотреть подробно.

Подробный разбор настроек SVG Options

1. Styling (Стили)

Настройка определяет, как будут прописаны стили элементов:

• Presentation Attributes — стили записываются прямо в атрибутах элементов (fill="", stroke="").

Пример:

<rect width="100" height="100" fill="red" stroke="black" />

• Internal CSS — CSS-стили встраиваются внутрь файла SVG.

Пример:

<style>
  .rect-style { fill: red; stroke: black; }
</style>
<rect width="100" height="100" class="rect-style" />

• Inline Style — стили прописываются как атрибут style.

Пример:

<rect width="100" height="100" style="fill: red; stroke: black;" />

• External CSS — стили выносятся в отдельный CSS-файл.

Пример:

<link rel="stylesheet" type="text/css" href="styles.css" />
<rect width="100" height="100" class="rect-style" />

(файл styles.css)

.rect-style { fill: red; stroke: black; }

Рекомендуемый выбор: Presentation Attributes, так как SVG становится компактным и легко редактируемым вручную.

2. Font (Шрифты)

Определяет, как будут обрабатываться шрифты:

• SVG — текст остается текстом, и шрифт встраивается в SVG. Удобно, но увеличивает размер файла.
• Outline — текст преобразуется в кривые (контуры). Наиболее подходящий вариант для логотипов и иконок, исключает проблемы с отсутствием шрифта у пользователя.

Рекомендуемый выбор: Outline (если важна стабильность отображения).

3. Images (Изображения)

Используется, если внутри SVG есть растровые изображения:

• Embed — встраивает растровые изображения прямо в SVG. Это увеличивает размер файла.
• Link — вставляет изображения ссылкой, но требует, чтобы файлы были доступны по внешнему URL.

Рекомендуемый выбор: Embed (если внутри SVG есть растровые элементы), иначе параметр не важен.

4. Object IDs (Идентификаторы объектов)

Определяет, как будут назначаться идентификаторы:

• Layer Names — идентификаторы генерируются из названий слоёв. Полезно для редактирования и последующей анимации.
• Minimal — короткие, минимальные идентификаторы, что облегчает вес файла.
• Unique — автоматически сгенерированные уникальные идентификаторы.

Рекомендуемый выбор: Minimal или Layer Names, если SVG планируется редактировать вручную или анимировать.

5. Decimal (Точность координат)

Определяет количество знаков после запятой в координатах точек:

• Чем выше число, тем точнее линии и кривые, но тем больше размер файла.
• Для большинства веб-задач достаточно точности 2-3 знака после запятой.

Рекомендуемый выбор: 2 (для баланса точности и размера файла).

6. Minify (Минификация)

Если отметить, Illustrator удалит лишние пробелы и переносы, уменьшая размер файла и ускоряя загрузку.

Рекомендуемый выбор: отметить (Minify ✔).

7. Responsive (Адаптивность)

Определяет, будет ли SVG масштабируемым:

• Если включено, SVG не содержит фиксированных размеров (width и height), что позволяет ему адаптивно заполнять доступное пространство.
• Если отключено, SVG получает жёсткие размеры и может не масштабироваться корректно.

Рекомендуемый выбор: отметить (Responsive ✔).

Итоговые настройки для веб-разработки

• Styling: Presentation Attributes
• Font: Outline
• Images: Embed (если есть растровые элементы)
• Object IDs: Minimal
• Decimal: 2
• Minify: ✔
• Responsive: ✔

Используя эти рекомендации, вы получите компактный и удобный для использования SVG-файл, который отлично подойдет для любого сайта.