Как правильно сохранить svg в illustrator
Перейти к содержимому

Как правильно сохранить svg в illustrator

  • автор:

Как сделать 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 чуть более тяжелым и менее удобным для анимации, но более совместимым (одинаково отображающимся в разных браузерах и при разных размерах).
  • Как.
  • …проверить качество сайта
  • …определить CMS
  • …сделать SVG
  • …настроить атрибуцию ссылок

Сохраняйте из Adobe Illustrator в SVG через экспорт: File → Export → Export As… .
В SVG Options выбирайте такие настройки:

  • Styling: Internal CSS
  • Object IDs: Layer Names
  • Decimal: 1 — чем меньше значение, тем меньше размер файла (минимальное значение — 1); а чем больше, тем точнее расположение элементов.
  • Если вебмастер потом будет править цвет или работать с анимацией — уберите галочку Minify. Код SVG станет чуть тяжелее, но будет более читабельным и удобным для работы.

Экспорт SVG из Illustrator 09
19

SVG играет центральную роль в современной сети. Они не только заменили шрифты значков, но также предлагают возможность манипулирования через CSS или JavaScript. Если вы хотите сохранить векторную графику для Интернета из Adobe Illustrator в формате SVG, вам необходимо выполнить некоторые настройки, чтобы избежать ошибок и сократить время загрузки, которые я представлю в следующей статье.

Общую функцию экспорта можно найти в разделе « Файл> Экспорт> Экспортировать как . ». Наконец, выберите « SVG (* .SVG) » в качестве типа файла. Если вы не хотите обрезать прозрачные области и учитывать область рисования, установите флажок « Использовать области рисования », иначе нет. В следующем диалоговом окне вы выбираете следующие параметры:

Если вас не устраивает уровень детализации путей в результате, вы постепенно увеличиваете десятичные разряды до 3 или 4.

Это становится интересным, когда вы вставляете обтравочные маски в векторный файл. Их также можно устранить (это снова приводит к уменьшению размеров файлов и повышению совместимости при использовании таких инструментов печати, как dompdf ).

В Illustrator есть два хорошо известных способа: сначала вы помечаете все объекты с помощью CTRL + A и выбираете « Объект> Уменьшить прозрачность . ». Затем вы удалите существующие обтравочные маски с помощью « Объект> Обтравочная маска> Преобразовать обратно ». Если это не сработает, выполните следующие действия вместо двух последних шагов: Сначала выберите « Объект> Преобразовать . > ОК », а затем выберите параметр « Удалить область перекрытия » в диалоговом окне «Обработка контуров».:

Окончательный SVG можно дополнительно оптимизировать с помощью таких инструментов, как svgo (в командной строке или в веб-интерфейсе ).

Адрес офиса

close2 new media GmbH
Forstenrieder Allee 169
81476 Мюнхен

Как сохранить svg в Adobe illustrator?

Файл отображается не коректно, фигуры сжаты и не на своих местах после сохранения файла в svg . Весь гугл перерыл, с svg фалами работаю в первые. В других форматах все отлично отображается.
Adobe illustrator 2015.3 русская локализация
Исходный Файл .ai
Битый .svg

  • Вопрос задан более трёх лет назад
  • 12471 просмотр

Комментировать

Решения вопроса 0

Ответы на вопрос 2

idd

da1425bd98144ee7a43534f836342210.jpg

В иллюстраторе нужно было разгруппировать все объекты и отключить все маски, вобщем всё это есть в ссылках что скинул GreatRash.
При сохранении .svg в дополнительных настройках нужно отключить «респонсив», именно из-за него бывают проблемы.
Generisk2.svg

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Как правильно сохранить svg в illustrator

Как правильно сохранить SVG, так, чтобы использование векторного изображения на сайте оправдывало себя не только с эстетической стороны, но и было практичным, в отношении веса изображения?

В чем работать с векторной графикой?

В основном, дизайнеры используют в работе векторные графические пакеты Sketch, Illustrator. Значительно реже идут в ход профориентированные под работу с SVG графические пакеты, такие как например Inkscape.

Подробонее про графические пакеты и js-библиотеки:

  • Top 15 Free SVG Tools for Graphic & Web Designers
  • MDN: Tools for SVG

Чем симпатичен SVG?

При целевом использовании SVG позволяет:

  • минимизировать размер файла с изображением логотипа / иконки / иллюстрации;
  • разместить элемент, который при соблюдении пропорций сторон, не чувствителен к размеру отображения
  • применить к фрагментам различные стили средствами CSS (цвет, градиент и прочее)
  • добавить интерактива и анимации за счет применения возможностей CSS и JS

Примером может являться цикл разрабатываемых нами интерактивных заставок для веб-ресурсов ежегодного фестиваля Solar Systo Togathering:

  • 2015.solarsysto.ru
  • 2016.solarsysto.ru
  • 2017.solarsysto.ru

Итак, у нас есть некий векторный файл в AI

Рассмотрим частный и особо частый случай сохранения из Adobe Illustrator.

Сразу нужно отметить, что для целей веб-разработки, в основном, вставка в файл растровых изображений не требуется, но SVG формат такую возможность поддерживает. Поэтому нужно проверить, не затесался ли где-то растровый слой или слой с эффектом из иллюстратора, который преображается в растр при сохранении в SVG. Это будет видно в структуре кода SVG файла или в прилинкованных файлах сохраняющихся вместе с SVG файлом (об этом подробнее в пункте 5).

Обо всём по порядку:

1. Открываем файл

Открывем файл в Adobe Illustrator:

image

Насколько мы видим у него есть лишние белые поля по всем сторонам. Так что первым делом мы:

2. Убираем лишние поля

image

3. Оптимизируем вектор в иллюстраторе

Сливаем массу слоев в минимальное количество, убирая группы. Взаимосвязанные слои, представляющие собой единый объект, стремимся склеить, а при необходимости — вырезать друг из друга.

image

image

4. Сохраняем: File / Save As

В общем списке форматов находим SVG, выбираем его, а так же берем на заметку то, что там есть еще и SVGZ (сжатый файл, еще меньше по размеру, без потери качества).

image

5. Знакомимся с диалоговым окном сохранения

image

  • SVG Profiles
    По умолчанию используется SVG 1.1
  • Fonts
    Type / Convert to outlines — что означает «перевести в кривые», то, что нам и нужно, при этом селект Subsetting становится недоступным для изменения.
    Type / SVG — Нужен в случае, если в SVG встраивается текст
    Type / Subsetting — Позволяет указать включаемый набор символов с целью дальнейшей возможности редактирования текста в режиме исходного кода и представления его графически при отображении SVG файла.
  • Options
    Image Location / Embed — при наличии растровых изображений позволит включить их в состав SVG файла
    Image Location / Link — при наличии растровых изображений положит их рядом с файлом в той же папке, указав в SVG файле ссылку на них. Если в данном случае убрать изображение включаемое, то SVG файл перестанет корректно отображаться.
    Preserve Illustrator Capabilities — галочка, предполагающая последующую возможность редактирования файла в иллюстраторе
  • More options
    Трогать для решения наших задач необязательно.
  • SVG Code
    Замечательная кнопка, позволяющая просмотреть SVG файл в текстовом формате сразу.

При выбранном Image Location / Embed:

По структуре кода можно даже совершенно не профессиональным взглядом выявить вставки растровой графики.

Всё дело в том, что в SVG очень четко виден принцип описательной части векторной формы в XML формате. В то же время, код растрового изображения визуальному анализу никак не поддается.

Пример, с 666 строки идет растровая дичь, абсолютное зло в нашем случае:

image

При выбранном Image Location / Link:

В коде будет менее заметная вставка, например:

Поэтому желательно просматривать именно в режиме Image Location / Embed!

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

6. Иконка планеты

Открывает SVG файл для просмотра в браузере установленном основным по умолчанию.

7. На выходе получаем SVG или SVGZ файл

Формат: Без оптимизации векторной формы в иллюстраторе * С учетом оптимизации векторной формы в иллюстраторе *
SVG 36 813 bytes 35 941 bytes
SVGZ 15 310 bytes 15 214 bytes

Вроде бы разница не велика, но это еще не конец процедуры.

Дальнейшие действия по оптимизации файла

Важно отметить, что полученный на выходе файл при этом содержит большое количество сносок, комментариев, пробелов, переносов, свойств, которые совершенно не являются обязательными.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *