Экспорт 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, так, чтобы использование векторного изображения на сайте оправдывало себя не только с эстетической стороны, но и было практичным, в отношении веса изображения?
В чем работать с векторной графикой?
В основном, дизайнеры используют в работе векторные графические пакеты 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:
Насколько мы видим у него есть лишние белые поля по всем сторонам. Так что первым делом мы:
2. Убираем лишние поля
3. Оптимизируем вектор в иллюстраторе
Сливаем массу слоев в минимальное количество, убирая группы. Взаимосвязанные слои, представляющие собой единый объект, стремимся склеить, а при необходимости — вырезать друг из друга.
4. Сохраняем: File / Save As
В общем списке форматов находим SVG, выбираем его, а так же берем на заметку то, что там есть еще и SVGZ (сжатый файл, еще меньше по размеру, без потери качества).
5. Знакомимся с диалоговым окном сохранения
- 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 Location / Link:
В коде будет менее заметная вставка, например:
Поэтому желательно просматривать именно в режиме Image Location / Embed!
Если в файле оказался растровый фрагмент, то его рекомендуется ликвидировать, перерисовав растровый слой в векторе. Это значительно уменьшит размер файла и позволит не потерять качества при масштабировании.
6. Иконка планеты
Открывает SVG файл для просмотра в браузере установленном основным по умолчанию.
7. На выходе получаем SVG или SVGZ файл
Формат: | Без оптимизации векторной формы в иллюстраторе * | С учетом оптимизации векторной формы в иллюстраторе * |
SVG | 36 813 bytes | 35 941 bytes |
SVGZ | 15 310 bytes | 15 214 bytes |
Вроде бы разница не велика, но это еще не конец процедуры.
Дальнейшие действия по оптимизации файла
Важно отметить, что полученный на выходе файл при этом содержит большое количество сносок, комментариев, пробелов, переносов, свойств, которые совершенно не являются обязательными.
Правильный экспорт SVG
Подготовка документа для анимации — важный этап, к которому нельзя относиться пренебрежительно, так как это может обернуться весьма неприятными последствиями. Давайте рассмотрим, какие существуют особенности экспорта SVG в Adobe Illustrator.
В данной заметке мы не будем учить, как лучше всего рисовать в Illustrator. Но скажем полезную вещь: при отрисовке фигур очень важно следить за значениями, причем весьма желательно, чтобы они имели только одно число после запятой, а в идеале — вообще были целыми. Конечно, совсем не обязательно всегда следовать этому правилу, однако если вы будете это делать, то имейте в виду, что в результате:
- уменьшится размер файла,
- упростится дальнейшая анимация,
- визуально сократится объем информации.
В нем реализована одна и та же кривая, однако в 1-м случае мы видим одну цифру после запятой, тогда как во 2-м их три. Сама кривая состоит всего из четырех точек, причем обратите внимание, что 2-й пример на одну треть длиннее 1-го. А теперь представьте, насколько больше места займет кривая, если она будет состоять из 20-ти точек.
Хорошо, каркас мы нарисовали, теперь хотим сохранить изображение в качестве SVG-файла. У нас существуют для этого 2 пути:
- «Сохранить как»;
- «Экспортировать как».
Какой из них лучше? Мы рекомендуем первый: «Сохранить как». Почему, если на первый взгляд никакой разницы нет, ведь мы и так, и эдак получим файл с изображением и с расширением .svg? Однако отличия есть, и начинаются они еще на этапе параметров экспорта.
Очевидно, что в случае с вариантом «Сохранить как» мы имеем гораздо больше настроек, что уже является весомым аргументом для использования именно этого варианта. Однако продолжим.
Если мы откроем файлы, которые сохранены 2-мя способами в веб-браузере, то не увидим разницы, но только на первый взгляд. Но ведь нас больше интересует не внешний вид, а начинка, поэтому лучше всего выполнить открытие через текстовый редактор. И вот здесь отличия станут более очевидными. Впрочем, лучше попробуйте выполнить это сами, что позволит вам сделать однозначные выводы.
Как экспортировать SVG из Adobe Illustrator?
Здравствуйте, подскажите, что за хрень? В проекте есть вот такое:
Мне нужно экспортировать ОДНУ галочку, но не получается — экспортируются только все 4 разом.
Я так понимаю, они как то скреплены/связаны или что, пытался найти что-то типа разгруппировать, но я новичок в иллюстраторе, гуглил — не нашел. Помогите разобраться)
Скриншот слоёв.
- Вопрос задан более трёх лет назад
- 137 просмотров
Комментировать
Решения вопроса 1
У вас составной контур.
Вам нужно отменить составной контур.
Ищите меню «Объект — Составной контур — отменить».
(Возможно, в последних версиях иллюстратора по русски отличаться, взято из англо-русского переводчика Иллюстратора на демирарте)
По англ это Object-Compound Path-Release.
или клавишами Ctrl+shift+alt+8
Ответ написан более трёх лет назад