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

Файли SVG: от Illustrator к Веб.

Scalable Vector Graphics (SVG) – векторный формат изображений, который начал развиваться с 1998 года. Он всегда разрабатывался с учетом веб, однако только сейчас веб собственно начал наверстывать упущенное. Сегодня никто не отрицает его важность, так что давайте взглянем, как перенести SVG из Illustrator в веб-браузер.

Обратите внимание: я использую Adobe Illustrator CC для демонстрации примеров в этом руководстве, однако в других версиях имеются подобные (если не идентичные) опции и инструменты.

Чем полезен SVG?

Формат SVG был разработан и поддерживается World Wide Web Consortium (W3C) (* Консорциум World-Wide Web. Здесь и далее примеч. пер.). W3C состоит из группы умных людей, которые пытаются стандартизировать веб, делая его открытым и доступным местом для всех.

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

Размер файла всегда является проблемой в веб (никто не хочет ожидать, пока изображение размером 5Tb загрузится в браузер по мобильному соединению), и поэтому у нас имеется SVG – упрощенный векторный формат. Он основан на XML, и много лишнего «хлама» удаляется, благодаря чему получается относительно легковесный файл.

Наконец, при наличии этих строительных блоков XML содержимым файла SVG можно манипулировать и задавать для него стилевое оформление так же, как и для любого другого элемента веб-страницы. Части внутри SVG могут быть изолированы, цвета и насыщенность шрифта могут быть изменены, как и прозрачность, мы даже можем применить определенные фильтры (такие как фильтр для добавления эффекта размытости), даже добавить анимацию – все это при помощи кода CSS и JavaScript.

Когда бы вам мог пригодиться SVG?

Преимущества четкости линии и возможности манипулирования графическим объектом говорят сами за себя, однако в каких случаях вы можете ими воспользоваться? Ниже приводится список случаев, когда использование SVG наиболее эффективно:

Обычная графика: Если вы используете графику на вашем сайте, то обдумайте, могла ли бы она быть представлена в формате SVG. Если да, то почему бы не воспользоваться им? Искусство фотографии могло бы послужить примером области, где использование SVG не имеет смысла, однако в остальных случаях поразмышляйте о возможности использования SVG.

Демонстрация четких образцов шрифта . Зачем создавать себе проблемы из-за нечетких растровых форматов?

Иконки: веб-сайты во всем мире усыпаны иконками; их все понимают (если их использование уместно) и при помощи них сокращается время, необходимое пользователям для взаимодействия с интерфейсом. Иконки сегодня часто добавляются на веб-сайты при помощи шрифтов для веб, однако также могут быть добавлены на страницу в формате SVG. Идеально ровные и четкие иконки для всех, чудесно.

Я еще не завершил этот набор иконок SVG, однако при желании можете скачать и пользоваться ими .

Логотипы: если и есть что-то, что компания должна тщательно оберегать, то это собственную идентичность. Очевидно, что формат SVG предоставляет вам наилучший способ отображения фирменной символики в веб. Цвета можно задать с высокой точностью, качество линии безукоризненное, и тот же самый файл может быть использован повторно на одном веб-сайте, однако изменен в зависимости от обстоятельств. Великолепно.

Художественное оформление: мне не нужно убеждать вас в том, что этот формат полезен для мастеров векторного искусства.

Изображение в формате SVG выше предоставлено fixate.it .

Анимация: при помощи CSS и JavaScript для веб открылся целый мир анимации. SVG также является великолепным посредником в этот мир из-за всех перечисленных мною ранее причин. Можете представить кнопки, которые анимируются, когда вы перемещаете курсор мышки поверх них? Иконки, которые предоставляют вам непосредственную персональную обратную связь? Действительно, пределов нет.

Иконка с Iconic , демонстрирующая обратную связь, реализованную при помощи SVG

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

Сохраняем файл в формате SVG

Мы будем работать с простейшим изображением, чтобы продемонстрировать вам, как работать с SVG.

Новый документ

Откройте Illustrator, начните создавать новый документ (File > New Document), дайте ему название при желании и задайте в качестве размеров Artboard (* монтажной области) 300 x 300px.

Выбираем изображение

На данном этапе то, что вы используете в качестве своей демоверсии вектора, особой роли не играет, однако выберите что-нибудь относительно простое. Я воспользовался глифом «No Pirates Allowed», который бесплатно доступен в составе шрифта «Webdings» (никогда не думал, что он мне может пригодиться!).

Перейдите в панель Glyphs (Type > Glyphs), затем выберите шрифт «Webdings» для просмотра различных доступных персонажей.

После выбора инструмента Text Tool выберите Artboard, затем дважды нажмите по вашему глифу, чтобы им воспользоваться.

Преобразуем в контур

Теперь мы преобразуем этот глиф в контур.

Обратите внимание: в SVG действительно имеется поддержка текстовых объектов, однако для того, чтобы продемонстрировать, как работать с этой технологией на фундаментальном уровне, мы остановим свой выбор на путях.

Выберите глиф при помощи Selection Tool (V):

Затем выберите Type > Create Outlines.

Супер! Теперь у нас имеется векторный объект, созданный на основе путей.

Сохраняем результат

Для того чтобы сохранить этот документ в формате SVG, выберите File > Save или File > Save As.. В выскочившем диалоговом окне выберите расположение для файла, дайте ему название (если еще этого не сделали) и, что чрезвычайно важно, выберите в качестве формата SVG:

Далее появится другое диалоговое окно, в этот раз с некоторыми опциями SVG.

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

Мы немного рассмотрим некоторые из этих опций позднее, однако в этот раз жмите OK.

У нас имеется файл SVG!

И затем идут те опции SVG

Мы пропустили опции SVG, поскольку они не заслуживают особого внимания. Однако для полноты картины давайте рассмотрим их.

Сравнение SVG с SVGZ

Начнем с того, что мы могли бы выбрать два потенциальных формата в диалоговом окне для сохранения файла.

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

SVG Profiles (* Профили SVG)

Поскольку веб не стоит на месте и веб-стандарты постоянно развиваются, то SVG всегда совершенствуется. Вы видите это на примере первой опции, представленной в диалоговом окне, появляющемся при сохранении файла SVG – SVG Profiles. Варианты профилей в данный момент выглядят следующим образом:

Они означают (приблизительно) следующее:

• SVG 1.0: первое воплощение SVG (2001)
• SVG 1.1: почти то же самое, что и SVG 1.0, за исключением того, что в версии SVG 1.1 могут быть выделены дальнейшие подтипы, которыми являются.
• SVG Tiny 1.1: это первый подтип SVG 1.1, оптимизированый с учетом мобильного веб. Это очень упрощенная форма SVG, предназначенная для «мобильных устройств с крайне ограниченными возможностями». Эта версия не поддерживает возможность добавления градиентов, прозрачности, масок, символов, паттернов, перечеркнутого текста, вертикально-ориентированного текста или эффектов, реализуемых при помощи фильтров SVG.
• SVG Tiny 1.1+: слегка усовершенствованная версия SVG Tiny 1.1, в которой добавлена поддержка градиентов и прозрачности.
• SVG Basic 1.1: это второй подтип SVG 1.1, разработанный для более продвинутых мобильных устройств, таких как смартфоны. В этой версии нет поддержки вырезания непрямоугольной области и некоторых эффектов, реализуемых при помощи фильтров SVG.
• SVG Tiny 1.2: изначально предполагалось, что эта версия станет следующей полной спецификацией SVG, однако в конечном итоге стала усовершенствованием подтипа Tiny. Не спрашивайте меня, в чем же там заключается различие.

Скоро мы сможем добавить SVG 2.0 в этот перечень. На самом деле нюансы этих профилей нас почти не интересуют. При помощи SVG мы можем реализовать все что угодно, однако при работе с простыми векторами придерживайтесь текущей версии по умолчанию – SVG 1.1, и с вашей графикой будет все всегда в порядке в веб.

Fonts (* Шрифты)

SVG-файлы могут содержать намного больше, чем просто векторные пути. Текстовые объекты являются одним из таких примеров, и опция Font позволяет вам указать, как они должны обрабатываться.

• Adobe CEF: при этом значении опции используется хинтинг шрифта (* механизм уменьшения насыщенности (толщины очертаний)) для улучшения типографской разметки текста. Однако этот вариант не поддерживается всеми программами просмотра SVG.
• SVG: при этом значении опции поддерживается максимум возможностей; этот вариант поддерживается всеми программами просмотра SVG, однако нет улучшения типографской разметки текста.
• Convert To Outlines: при этом значении опции убирается поддержка всех возможностей редактирования, однако текст остается тем же, где бы он не просматривался. В результате выбора этого варианта слегка увеличивается размер файла, поскольку необходимо описать пути, а не просто указать, какие символы присутствуют.

Часть опции для настройки обработки шрифта включает в себя Subsetting. Настраивать эту опцию стоит только тогда, когда вы решили не преобразовывать ваш текст в контур.

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

Options

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

Как и в случае со шрифтами, SVG-файлы могут содержать растровые изображения. Там, где вы видите Image location, выберите «Embed», чтобы изображения добавились в файл в форме кода, или выберите «Link», чтобы там просто размещались ссылки на изображения. Эта опция работает аналогично тому, как вы размещаете изображения в самом Illustrator, и выбор варианта значительно влияет на конечный размер файла.

Последний флажок здесь позволяет вам при необходимости сохранить возможность редактирования файла в Illustrator. При этом будут сохранены детали обо всех слоях, фильтрах и эффектах, символах и т.д. Опять-таки, не отмечайте флажок, если ваш SVG-файл готов к стадии публичного доступа приложения и его размер важен.

Обратите внимание: рекомендуется, чтобы у вас имелся рабочий AI-файл (* файл в формате Adobe Illustrator Artwork), которым можно воспользоваться для редактирования изображения.

Несколько кнопок

Наконец, при помощи трех кнопок в нижней части диалога для настройки опций выполняется следующее:

• More Options: давайте не будем их сейчас обсуждать, хорошо?
• SVG Code...: показ кода XML, содержащегося в SVG-файле, прямо в текстовом редакторе.
• Globe: открытие SVG-файла прямо в веб-браузере. Именно так вы можете проверить, все ли с ним в порядке.

Использование SVG в веб

Если вы не работали непосредственно с веб, HTML, браузерами и подобным, то вам нужно обратить ваше внимание на несколько моментов.

Веб-браузера

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

Более старые веб-браузера, такие как Internet Explorer 8 и более ранние версии, не поддерживают формат SVG и, к сожалению, не подыграют нам.

За подробностями о поддержке SVG браузерами обращайтесь к caniuse.com .

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

Первое, на что следует обратить внимание, – то, что у изображения остались изначально заданные размеры. Наше изображение отобразилось в области с размерами 300 x 300px, внешние границы которой были заданы на основании размеров монтажной области, и иконка пирата разместилась там, где и должна быть, – в центре.

Встраивание SVG в веб-страницу

На данный момент мы создали SVG-файл и открыли его в браузере, чтобы проверить, все ли с ним в порядке. Теперь пришло время воспользоваться нашим файлом надлежащим образом на веб-странице.

Для начала нам необходима веб-страница. Нам достаточно будет пустого файла с расширением .html , сохраненного в обычном текстовом редакторе. В него не нужно добавлять никакого кода, однако если вы заинтересованы в освоении основ HTML, то взгляните на руководство The Best Way to Learn HTML , когда у вас будет время.

Ниже показан мой файл, открытый в TextEdit для Mac OS X, однако вы можете использовать любой текстовый редактор или редактор кода, который вам нравится.

Этот файл откроется в веб-браузере вполне нормально в том виде, в каком он сейчас, однако нам необходимо добавить некоторый код HTML-разметки, чтобы встроить SVG. Для этого имеется несколько подходов:

Подход, реализуемый при помощи тега <img>

Во-первых, мы можем воспользоваться тегом для добавления изображений (который вы, вероятно, использовали для добавления файлов JPG, PNG и т. д.), в котором указан точный путь к файлу в атрибуте . Добавьте этот фрагмент кода в ваш HTML-файл:

Если путь указан корректно, то ваша HTML-страница откроется в браузере подобным образом:

Да, я понимаю, что сейчас все выглядит так же, как и тогда, когда мы открыли SVG-файл непосредственно в веб-браузере, однако сейчас у нас имеется намного больше возможностей для работы с ним! Например, мы можем тут же увеличить SVG при помощи атрибута width=»» .

Прекрасная четкая SVG, которую можно масштабировать сколько угодно!

Этот подход, вероятно, – наипростейший, однако имеет свои недостатки. Некоторые браузера, по соображениям безопасности, ограничат круг ваших возможностей для работы с SVG (при помощи JavaScript, например). Давайте взглянем на альтернативные подходы.

Подход, реализуемый при помощи тега <object>

Тег <object> используется подобным образом, однако вы указываете путь к файлу следующим образом:

Результат получается тот же самый:

Вы можете даже поместить предупреждение в содержимом <object> для отображения в случае, если браузер не поддерживает SVG:

Многие веб-дизайнеры согласны с тем, что этот подход на данный момент – наиболее надежный и гибкий способ использования SVG в веб-странице.

Подход, при котором код SVG встраивается непосредственно в документ

Мы говорили о том, что SVG работает на основе XML, и если вы откроете ваш текстовый редактор, то увидите нечто подобное:

Вау, что за куча бессмыслицы! Собственно, по прошествии стартового шока у вас должно будет получиться увидеть некоторый смысл среди нее. Мы можем использовать этот код XML прямо в документе, встроив его непосредственно в HTML-файл.

Когда вы начнете узнавать XML-структуру SVG, вы сможете удалить некоторые кусочки из файла, что поможет уменьшить его размер.

При желании можете запросто удалить строку с <!DOCTYPE> , комментарий с !— Generator: Adobe Illustrator и даже код с <?xml

Все, что вам в действительности необходимо, это упрощенная версия кода, включающего только несколько тегов XML:

Подход, при котором SVG-изображение добавляется в составе фонового изображения, задаваемого в коде CSS

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

Мы выходим за рамки этого руководства сейчас, однако если вы хотите разобраться с основами CSS, то взгляните на The Best Way to Learn CSS .

Мы можем воспользоваться отдельным файлом CSS, подключая его в нашем HTML-документе, или же тегами <style> непосредственно в нашем HTML-документе. Наше стилевое правило выглядело бы следующим образом:

Оно утверждает, что наш SVG-файл должен отображаться как фон нашего HTML-элемента.

Заключение

На этом мы заканчиваем с основными сведениями! В этом руководстве мы рассмотрели, как создавать SVG и основы использования SVG в веб.

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

У нас имеется на подходе больше руковдств на тему анимаций и взаимодействия с SVG-графикой, так что следите за обновлениями!

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

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

О формате SVG

SVG — векторный формат, описывающий изображения в виде фигур, линий, текста и фильтров. Сохраняемые файлы невелики по размеру и обеспечивают высокое качество изображений в Интернете, на печати и даже на портативных устройствах с ограниченными ресурсами в отличие от форматов GIF, JPEG, WBMP и PNG, которые занимают много места. Пользователи могут увеличить изображение SVG на экране без потери резкости, деталей или четкости. Кроме того, формат SVG отлично передает текст и цвет, и пользователи всегда видят изображения таким, как оно выглядит в монтажной области Illustrator.

Формат SVG полностью основан на XML и дает много преимуществ разработчикам и пользователям.

Сохранить объект в формате SVG можно с помощью команд Сохранить , Сохранить как , Сохранить копию и Сохранить для Web и устройств . Для доступа к полному набору параметров экспорта в формате SVG используйте команды Сохранить , Сохранить как и Сохранить копию . Команда Сохранить для Web и устройств предоставляет ограниченный набор экспорта в формате SVG (только те, которые используются для работы в Интернете).

Применение эффектов SVG

Эффекты SVG можно использовать для добавления в объект таких графических свойств, как тени. Эффекты SVG отличаются от битовых эквивалентов тем, что они основаны на XML и не зависят от разрешения. Фактически, эффект SVG — это не что иное, как серия свойств XML, описывающих различные математические операции. Полученный эффект визуализируется для целевого объекта, а не для исходной графики.

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

Как сохранить файлы Adobe Illustrator в других форматах: JPEG, PNG, SVG и т. Д.

По умолчанию Adobe Illustrator сохраняет файлы в формате AI . Это идеально подходит для работы над проектами или для сохранения мастер-копии вашей работы.

Но когда придет время распечатать или поделиться готовым продуктом, опубликовать его в Интернете или импортировать в другие программы, вам нужно будет сохранить его в другом формате.

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

Сохранение артбордов в Adobe Illustrator

Прежде чем мы рассмотрим, как сохранять файлы в определенных форматах, важно знать, как Illustrator обращается с монтажными областями. и как сохранить монтажные области в виде отдельных файлов.

Артборды похожи на разные страницы в файле Illustrator. Они могут быть объединены в одно изображение, но вы также можете сохранить их отдельно.

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

Вот что вы должны сделать:

• Если вы хотите сохранить несколько монтажных областей как отдельные файлы, установите флажок «Использовать монтажные области» . Затем выберите « Все», чтобы сохранить все монтажные области, или введите диапазон (например, 2–4), чтобы указать, какие монтажные области следует сохранять.
• Если у вас есть объекты, расположенные вне артборда (например, если он перекрывает край), установите флажок «Использовать артборды» . Это гарантирует, что ваше окончательное изображение содержит только то, что находится внутри монтажной области, а остальное обрезано.
• Если все ваши изображения находятся внутри монтажной области , и у вас есть только одна из них, снимите флажок «Использовать монтажные области» . Это создаст изображение, обрезанное до границ объектов внутри, со всеми удаленными пробелами. Это особенно удобно для вывода объектов квадратной или прямоугольной формы.

Сохранение JPEG в высоком разрешении в Adobe Illustrator

Для иллюстрации, инфографики или чего-либо, что необходимо напечатать, например, визитную карточку создать визитную карточку , лучший вариант — вывести его в формате JPEG с высоким разрешением.

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

Если вы ранее не работали таким образом, создайте новый документ, вставьте его в рисунок и настройте его по вкусу. Теперь вы готовы сохранить JPEG в высоком разрешении.

1. Перейдите в Файл> Экспорт> Экспортировать как . Введите имя файла и установите форматJPEG .
2. Укажите, как вы хотите сохранить монтажные области, затем нажмите « Экспорт», чтобы продолжить.
3. На экране параметров JPEG измените цветовую модель, если вам нужно, и выберите качество.
4. В разделе « Параметры» установите выходное разрешение. Экран (72 точек на дюйм) создаст файл того же размера, что и исходный документ, и должен быть пригоден для использования в Интернете. Выберите Высокое (300 точек на дюйм) для изображения с высоким разрешением. Это будет достаточно для печати.
5. Нажмите OK, чтобы сохранить файл.

Сохранение файлов Adobe Illustrator в формате PNG

Если вам необходимо сохранить изображение, например логотип или значок, для использования в Интернете, особенно если оно имеет прозрачный фон, вы можете сохранить его в формате PNG .

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

1. Перейдите в Файл> Экспорт> Экспорт для экранов .
2. Выберите вкладку Artboards . Если в вашем изображении несколько артбордов, выберите те, которые вы хотите вывести.
3. В разделе « Форматы» установите « Формат» на PNG и « Масштаб» на 1x .
4. Нажмите Добавить масштаб . Это создаст настройки для второго изображения, поэтому установите для параметра « Масштаб» новый относительный размер. 3x, например, будет выводить изображение в три раза выше и шире, чем оригинал.
5. Добавьте больше размеров, если они вам нужны.
6. Нажмите Export Artboard, чтобы сохранить ваши изображения.

Сохранение файлов Adobe Illustrator в формате SVG

Лучший, более современный способ экспорта графики, например значков и логотипов для Интернета, — использование формата SVG. Сокращенно от Scalable Vector Graphics, SVG на самом деле является языком разметки на основе XML.

Хотя вы можете выводить файлы, на которые вы можете ссылаться на вашей веб-странице, вы также можете сохранить изображение в виде фрагмента кода, который вы можете вставить непосредственно в ваш HTML-файл. Затем вы можете редактировать это с помощью CSS. Это очень эффективный способ добавления эффектов и анимации к вашим изображениям.

Есть и другие преимущества: изображения легки, и, поскольку они являются векторами, вы можете легко изменить их размер. Нет необходимости выводить изображения нескольких размеров для разных разрешений экрана.

Есть несколько способов создать SVG. Использование Сохранить как создает больший файл для работы. Для создания окончательного изображения, которое вы можете использовать в своих проектах, используйте опцию « Экспорт» .

1. Перейдите в Файл> Экспорт> Экспортировать как .
2. Установите форматSVG и нажмите « Экспорт» .
3. Установите стиль для внутреннего CSS . Это помещает всю информацию о стилях в блок <style>, который можно легко изменить с помощью CSS.
4. В качестве шрифта выберите SVG, чтобы сохранить выбор текста. Выбирайте Outlines, только если вы используете непонятный, нестандартный шрифт. Оставьте изображения на заповеднике .
5. Убедитесь, что Minify и Responsive проверены на максимальную производительность и совместимость.
6. Теперь нажмите Показать код, чтобы открыть код в текстовом редакторе. Вы можете скопировать и вставить это в свой HTML-файл. Или нажмите кнопку ОК, чтобы вывести изображение в виде файла SVG.

Сохранение артбордов в формате PDF в Adobe Illustrator

Самый простой способ сохранить файл Illustrator в формате PDF — это параметр « Сохранить как» . Однако, если вы используете более одного артборда, это объединит их все в многостраничный PDF.

Есть простой способ сохранить артборды в виде отдельных файлов PDF:

1. Перейдите в Экспорт> Сохранить для экранов .
2. В открывшемся диалоговом окне перейдите на вкладку Артборды и выберите те, которые вы хотите сохранить.
3. В правом столбце выберите « ФорматPDF» , затем нажмите « Экспорт монтажных областей» . Для вывода больших или сложных файлов может потребоваться несколько секунд.
4. По завершении ваши файлы будут по умолчанию сохранены в отдельной подпапке.

Сохранение объектов из изображения Adobe Illustrator

Иногда вам может понадобиться сохранить или экспортировать только выбранные объекты из более крупного произведения искусства. Например, если вы разработали логотип, вы можете сохранить текст или символ в отдельном файле.

Вы можете сделать это, превратив объекты в активы .

1. Перейдите в « Окно»> «Экспорт активов» .
2. Выберите инструмент «Выделение» на панели инструментов или нажмите V на клавиатуре. Теперь перетащите объекты, которые вы хотите сохранить, на панель « Экспорт активов» .
3. Теперь выберите Актив . Удерживайте Ctrl или Cmd, чтобы выбрать более одного.
4. В настройках экспорта выберите формат . Вы можете выбрать PNG, JPEG, SVG или PDF.
5. Если вы сохраняете как PNG или JPEG, вы можете экспортировать в нескольких размерах. Установите Scaleравным 1x , затем нажмите Add Scale и установите Scale равным , например, 2x . Вы также можете использовать эту опцию для экспорта актива в разные форматы.
6. Нажмите « Экспорт» и выберите место для сохранения новых файлов.

Как использовать файлы Adobe Illustrator в других приложениях

Есть и другие варианты, которые позволяют использовать файл Illustrator в других программах. Photoshop может открывать AI-файлы напрямую, но только как плоское, не редактируемое изображение. Вместо этого используйте параметр « Экспортировать как», чтобы сохранить файл в формате PSD. Это сохраняет все отдельные слои, когда вы открываете его в Photoshop.

Вы можете использовать AI-файлы в других приложениях и продуктах Adobe, таких как InDesign, где они не будут редактироваться, но будут сохранять такие вещи, как прозрачный фон.

Для большинства приложений, не принадлежащих Adobe, вам, скорее всего, потребуется сохранить файл в формате SVG (на этот раз с помощью команды « Сохранить как» ). Ознакомьтесь с нашим руководством по открытию файлов AI без Adobe Illustrator подробнее.

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

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

Содержание

Описание формата SVG

Вся представленная ниже информация относится к стандарту SVG 1.1, актуальному на момент написания материала.

SVG является стандартизированным расширением языка разметки XML , предназначенным для описания векторной графики преимущественно на веб-ресурсах.

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

Пример

Рассмотрим следующий пример векторного изображения в формате SVG :

На изображении описаны всего 5 геометрических фигур: 2 круга разных диаметров по центру и 3 прямоугольника. «Вес» изображения составляет всего 349 байт. Код файла выглядит следующим обрахом:

SVG-теги

Для описания элементов векторной графики в SVG применяются обусловленные спецификацией XML-теги:

Теги SVG, описывающие геометрические примитивы

Атрибуты тегов

Для описания свойств объектов векторного изображения в SVG-тегах применяется множество атрибутов. Вот некоторые из них:

Width Определяет ширину объекта. Height Определяет высоту объекта. Fill Определяет цвет заливки фигуры. Stroke Определяет цвет обводки фигуры.

Как создать SVG-картинку?

Можно выделить следующие способы создания векторных изображений в формате SVG :

1. вручную в текстовом редакторе,
2. с помощью векторных графических редакторов,
3. через онлайн-сервисы.

Создание вручную

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

Чтобы нарисовать красный квадрат с черной обводкой достаточно создать простой текстовый файл, заменить его расширение с .txt на .svg и вставить в него следующий код:

Графические редакторы

Чтобы нарисовать изображения в формате SVG , вовсе не обязательно знать язык разметки. Популярные редакторы векторной графики (Illustrator, CorelDRAW, InkScape) позволяют создавать и редактировать SVG-картинки, а также экспортировать в SVG другие форматы ( AI , CDR , EPS ).

Естественно, что перечисленные графические редакторы сами генерируют SVG-разметку при сохранении файла, не предоставляя пользователю возможность редактировать код в своём графическом интерфейсе.

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

Веб-приложения

Для создания, редактирования и сохранения SVG-рисунков также применяются онлайн-инструменты. Их функционал достаточно в сравнении с десктопными графическими редакторами, но для простейших рисунков они применимы:

Method Draw Простой в освоении и приятный глазу редактор, к тому же позволяющий редактировать SVG-код в интерфейсе. SVG Editor Более сложный в освоении редактор с непривычным интерфейсом и ограничениями в доступе.

Как реализовать SVG-анимацию?

Формат SVG предоставляет веб-дизайнерам огромные возможности в реализации статичных и интерактивных анимированных изображений для сайтов.

SVG-анимация посредством CSS (3,9 КБ)

Анимированные SVG-картинки во всём превосходят растровые GIF-аналоги: размер файла может быть меньше в десятки, сотни и даже тысячи раз, нет ограничений в глубине цвета, можно применять полупрозрачность и обеспечивать интерактивность, а чтобы создать анимацию вовсе не надо быть художником.

Реализовать анимацию в SVG можно 3-мя способами:

С помощью CSS3 Этот вариант предполагает манипулирование геометрическими примитивами с помощью внутренних или внешних CSS-свойств анимации. С помощью JS Геометрическими примитивами в SVG также можно манипулировать посредством JavaScript. С помощью SMIL Этот способ предполагает реализацию анимации с помощью специальных внутренних тегов в SVG-коде.

Наиболее простым и не требующим знаний в JS-программировании и SMIL-анимации можно считать анимацию посредством CSS. Для создания сложных SVG-анимаций, требующих определённых математических расчетов, существуют специальные JS-плагины и отдельные скрипты.

Как вставить SVG на сайт?

Векторные SVG-картинки могут быть внедрены в HTML-код посредством:

1. тега img ,
2. тега embed ,
3. CSS-свойств в качестве фона,
4. внедрения SVG-разметки (inline).

Вставка через тег img

Данный способ применим для вставки SVG на сайт в качестве статичного или анимированного изображения без интерактивности.

Недостатки метода

• Внешние CSS-свойства не применяются к SVG-тегам.
• JS не влияет на SVG-теги.
• Интерактивная SMIL-анимация не работает.

Вставка через тег object

Данный способ вставки SVG является наиболее предпочтительным в большинстве случаев.

Недостатки метода

• Внешние CSS-свойства не применяются к SVG-тегам.

Вставка через CSS

Для применения SVG-картинки в качестве фона HTML-элемента применяются CSS-свойства background или background-image :

Недостатки метода

• Внешние CSS-свойства не применяются к SVG-тегам.
• JavaScript не может управлять элементами изображения.
• Интерактивная SMIL-анимация не функционирует.

Непосредственное внедрение SVG в HTML

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

Недостатки метода

• Изображение не кэшируется.

Сколько «весят» SVG-файлы?

Сравнение размеров файлов SVG и PNG

Размер SVG-файлов (вес изображений), в отличие от растровых картинок, не зависит от размера в пикселях, но зависит от объёма кода. Для изображений большого размера преимущества формата SVG очевидны:

Оптимизированный SVG: 893 Б не зависимо от размера

Оптимизированный PNG-8 800×160px: 1.83 КБ

Оптимизированный PNG-8 600×120px: 1.4 КБ

Оптимизированный PNG-8 400×80px: 1.07 КБ

Оптимизированный PNG-8 200×40px: 670 Б

Все представленные PNG-файлы максимально сжаты и используют всего 16 цветов в палитре, при этом код SVG-файла максимально сокращён, но с использованием GZIP на стороне сервера «вес» будет составлять всего 468 Байт. Можно предположить, что SVG во всех случаях выигрывает у растровых изображений в отношении размера файла, но это не всегда так и за

Здесь можно наблюдать огромную разницу в размере файла между PNG и SVG : почти в 9 раз в пользу PNG , при том, что его размер в пикселях не так уж мал (800×335).

Это можно объяснить огромным количеством геометрических примитивов, описывающих картинку в SVG , в то время как PNG использует только цветные пиксели.

Из всего этого можно сделать следующий вывод:

SVG целесообразно использовать для изображений, не требующих большого количества геометрических объектов для отрисовки.

Оптимизация SVG-кода

Объём SVG-кода можно уменьшить путём оптимизации:

Удаление мета-данных После сохранения в графических редакторах (например, Adobe Illustrator) SVG-код содержит много ненужной информации, удаление которой сократит размер файла и ни как не отразится на изображении. Удаление лишних объектов Изображение может содержать ненужные или скрытые объекты, а также теги, группирующие объекты, удаление которых не сказывается на изображении. Удаление неиспользуемых классов и идентификаторов При редактировании векторных изображений графические редакторы могут добавлять к тегам классы и идентификаторы, в которых не нуждается финальный вариант картинки. Оптимизация атрибутов тегов Частое использование атрибутов можно заменить посредством CSS-свойств: при большом количестве элементов это поможет значительно уменьшить вес SVG . Удаление лишних узлов Каждая точка в векторном изображении отражается на объёме кода: удаление лишних узлов поможет сократить его объём.

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

, — описание и возможности на русском, — веб-приложение.

Веб-приложение SVGOMG позволяет оптимизировать SVG-картинки онлайн, при этом предоставляя всю необходимую информацию в своём интерфейсе: можно контролировать изменение веса файла в процентном соотношении, изменяя те или иные опции, а также видеть, отражается ли применение настроек на самом изображении:

Сжатие SVG-данных

Как и все текстовые данные, SVG-код может быть сжат алгоритмом GZIP. При активации на сервере алгоритм обеспечивает передачу данных от сервера браузеру в сжатом виде.

Для GZIP-сжатия на сервере должен функционировать модуль mod_deflate . Чтобы указать серверу, что SVG-файлы необходимо сжимать, в файле .htaccess указывается следующий код:

Кроме того, для уменьшения общего размера файла можно использовать формат SVGZ , содержащий сжатые данные SVG . Но смысла в этом нет, если применяется серверное GZIP-сжатие данных. Картинки в формате SVGZ можно сохранять в Adobe Illustrator.

Конвертация SVG в другие форматы и обратно

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

Как конвертировать в SVG?

Невозможно точно конвертировать растровый формат (например, JPG ) в SVG (или другой векторный формат), т. к. это разные виды графики. Но можно произвести трассировку растровой картинки и сохранить её в формате SVG .

Трассировка — процесс векторизации растрового изображения путём образования векторных контуров.

Необходимо понимать, что трассировка не может абсолютно точно преобразовать растровое изображение в векторный формат:

Результат трассировки зависит от многих особенностей исходного растрового изображения:

• контрастности,
• цветовой палитры,
• степени детализации,
• и др.

Трассировка — автоматический процесс создания векторных контуров. Иначе говоря, SVG-код результата трассировки будет содержать неопределённое количество тегов path , и файл на выходе может «весить» несравнимо больше исходного растрового изображения.

Выполнить трассировку растровой картинки ( JPG , PNG , GIF ) и сохранить её в SVG можно посредством Adobe Illustrator.

Как конвертировать из SVG?

Конвертировать SVG в растровый формат ( JPG , PNG , GIF ) можно с помощью векторных графических редакторов (Adobe Illustrator, CorelDRAW) посредством функций экспорта.

Процесс растеризации векторных изображений можно наблюдать в Photoshop или другом редакторе растровых изображений: при открытии векторного файла будет предложено его растрировать в определённом размере, после чего картинку можно сохранить в любом доступном растровом формате.

Преимущества формата SVG

Формат SVG имеет все преимущества векторной графики, а также ряд других преимуществ относительно растровых форматов изображений, применяемых в веб-дизайне:

Качество детализации не зависит от размера изображения

SVG-картинки не теряют в качестве детализации при увеличении или уменьшении их размера в пикселях.

Огромное преимущество перед растровыми форматами: SVG-картинки можно увеличивать или уменьшать во сколько угодно раз, при этом размер файла остаётся неизменным.

Возможности анимации SVG-изображений во много раз превосходят возможности GIF-анимации.

Для любого элемента SVG-картинки могут быть заданы CSS-свойства.

SVG использует все возможности браузеров.

В SVG-код можно подключать ссылки на растровые изображения, или внедрять их в виде base64.

Текст в SVG-изображении может быть преобразован в контуры, но можно использовать его посредством шрифта.

GZIP-сжатие и оптимизация кода может существенно уменьшить вес SVG-картинок без потерь в качестве отрисовки.

Недостатки формата SVG

• Не подходит для реалистичных изображений

Векторная графика не позволяет реализовать реалистичные цветовые переходы.

Сложность картинки пропорциональна количеству геометрических примитивов, а значит и «весу» SVG-изображения.

Рекомендации по применению формата

На основании вышеизложенного материала можно сделать выводы относительно применения векторных SVG-изображений на веб-сайтах:

• применяйте SVG для несложных рисунков и иконок с небольшим количеством деталей,
• применяйте SVG , если требуется статичная или интерактивная анимация рисунков,
• при выборе между SVG и растровым форматом сравнивайте размеры файлов на выходе,
• применяйте CSS и JS для реализации интерактивности SVG-картинок,
• при необходимости применяйте в SVG текст, не преобразуя его в контуры,
• оптимизируйте SVG-код файла на выходе,
• активируйте GZIP-сжатие SVG ,
• не используйте «тяжелые» SVG-файлы.

Часто задаваемые вопросы

Как создать (сохранить) SVG-файл?

Чем открыть файл в формате SVG?

Открыть SVG-файл можно в современных интернет-обозревателей (браузеров) для просмотра, а также в популярных редакторах векторной (CorelDRAW, Illustrator) и растровой (Photoshop) графики для редактирования и конвертации.

Как сохранить (скачать) SVG-изображение с сайта?

Сохранить SVG-файл с сайта можно различными способами в зависимости от того, как он вставлен в HTML.

Чтобы сохранить SVG-картинку, вставленную посредством тега img , нужно кликнуть по ней правой кнопкой мыши в браузере и из появившегося контекстного меню выберите «Сохранить изображение как. » (название пункта может отличаться в зависимости от браузера). Таким же способом можно копировать с сайтов картинки в других форматах.

В иных случаях нужно искать URL SVG-файла в HTML- или CSS-коде, открывать его в новом окне браузера и сохранять, применяя функцию «Сохранить как. ».

Как вставить SVG на сайт?

Как сохранить SVG в Photoshop?

Photoshop не предоставляет возможность сохранения изображений в этом формате. SVG — формат векторной графики. Для сохранения в этом формате применяются соответствующие программы (Illustrator, CorelDRAW).

Как сохранить SVG в Illustrator?

Чтобы сохранить картинку в формате SVG в Illustrator:

1. откройте или создайте изображение в программе,
2. выберите Файл → Сохранить как. (клавиши Shift + Ctrl + S ),
3. в диалоговом окне выберите папку для сохранения, название и тип файла ( SVG ) и нажмите «Сохранить»,
4. откроется модальное окно программы Illustrator с параметрами сохранения файла в формате SVG :

Как сжать (уменьшить) размер SVG-файла?

Как конвертировать JPG в SVG?

Как конвертировать SVG в JPEG?

Почему SVG не отображается на сайте?

Как правило, SVG не отображается на сайте из-за ошибок в коде файла или неправильной вставки в HTML-код Вставка SVG на сайт.

How to Export an SVG for web using Adobe Illustrator

SVGs are the future. Get vectorized! Small size. Process of exporting SVG hYAh.

Step 1. Open the source vector file in Adobe Illustrator

.ai, .eps, and .pdf are all valid file formats for vector source files.

Step 2. File > Document Setup

• Click on Edit Artboards
• Specify the W and H dimensions of the artboard to fit the design
• Scale the vector artwork to fit the newly sized artboard

Step 3. Select all and Object > Path > Outline Stroke

Step 4. File > Export…

Make sure use “Use Artboards” is checked.

Step 5.Click “Export”

• Select Format: SVG (svg)

Use the following settings:

• Styling: Internal CSS
• Font: Convert To Outline
• Images: Preserve
• Decimal: 4
• Minify: Checked
• Responsive: Unchecked

*BONUS STEP* (for improved legacy browser compatibility)

Open the generated .svg file and add the following XML attribute to the SVG tag:
preserveAspectRatio=»xMidYMid meet»

Resources

• http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
• Description of values:
  meet – Preserves aspect ratio and scales view box to fit within viewport.
  slice – Preserves aspect ratio and slices off any part of the image that does not fit inside the viewport.
  none – Does not preserve aspect ratio. Scales image to fit view box fully into viewport. Proportions will be distorted.

• Facebook
• Twitter
• LinkedIn

Recent Posts

• How to take a screenshot in Chrome, Firefox, Safari, and Edge
• How to clear your browser cache
• Upgrade WordPress Search with Elasticsearch
• A Philosophical Appeal to Globally Embrace GDPR
• How to Export an SVG for web using Adobe Illustrator

WEBDOGS

WordPress Design & Development in
San Jose, Silicon Valley, and Beyond

Accessibility Privacy Policy Copyright © 2012 — 2022 WEBDOGS LLC. All rights reserved.

Сохранение типа шрифта в SVG-файле иллюстратора

Привет, я новичок в иллюстраторе и создал изображение, которое использует шрифт «Skia-Regular». Но когда я сохраняю это изображение в формате .svg , он меняет тип шрифта. И когда я открываю файл формата .svg в браузере, шрифт совершенно другой. Может кто-нибудь, пожалуйста, скажите мне, что я делаю не так. Я также открыл файл .svg в notepad ++ и там написано: font-family = «Skia-Regular», но все же шрифт не Skia Regular. Любая помощь будет оценена. Спасибо

Изображение также прикреплено для справки

Если вы хотите быть уверены, что текст будет выглядеть одинаково во всех случаях —

Во-первых, вы можете развернуть текст перед сохранением как SVG

Во-вторых, в диалоговом окне сохранения шрифта вы можете нажать «преобразовать в контур»

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

Чтобы преодолеть проблему рендеринга шрифтов, вам необходимо скопировать код SVG из Illustrator и изменить имя шрифта, чтобы оно соответствовало имени шрифта, установленного в вашей системе. (Например: имя шрифта в коде SVG, которое от Illustrator «Arial-Regular», но имя шрифта, установленного в вашей системе, «Arial Regular». Здесь вам нужно будет изменить код, чтобы Font-Family назывался «Arial Regular». ».)

Это решит вашу проблему без необходимости преобразования шрифтов в контур.

Надеюсь это поможет!

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

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

архив для сети:

1. использовать гугл шрифты.
2. использование только двух семейств шрифтов макс.

Экспорт: шрифты: (текст: svg, subconjunto: нет). свойства svg: (элемент стиля).

в пределах стилей полученного файла отредактируйте его:

1. прикрепить строку «@import».
2. прикрепить «px» ко всему размеру шрифта.
3. переименуйте имя шрифта.

результат:

Скорее всего, на вашем компьютере нет шрифта семейства шрифтов (Skia-Regular), доступного локально. Поэтому, когда вы открываете файл SVG в своем браузере, он отрисовывается с использованием системного шрифта по умолчанию, который в большинстве случаев является Times New Roman. Есть несколько обходных путей: