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

Обновлено: 05.07.2024

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

Наблюдайте за началом анимации с помощью HTML5 Canvas Возможно, вы анимировали с помощью CSS, но пробовали ли вы HTML5?

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

Это именно то, что вы узнаете сегодня.

Создание SVG в Illustrator

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

Установите правильное цветовое пространство

Illustrator, как и большинство программ для векторной иллюстрации, изначально был разработан для печатной продукции, поэтому его цветовое пространство по умолчанию установлено в CMYK. RGB гораздо больше подходит для использования в Интернете и на экране и имеет более широкую гамму (диапазон цветов), чем CMYK. Поэтому, когда вы создаете новый документ, убедитесь, что цветовой режим установлен на RGB — как вы можете видеть на изображении ниже.

Дайте вашему рисунку правильную структуру

Файл SVG не похож на обычное растровое изображение — сетку пикселей. Это текстовый документ, имеющий определенную структуру.

Как и HTML-документ, вы можете выбирать отдельные элементы и управлять ими. Для этого вам нужно использовать их имена в качестве справочного материала. Я обнаружил, что всегда проще создавать эти ярлыки во время визуального редактирования в Illustrator, чем позже.

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

Слои Illustrator и имена групп слоев используются в качестве идентификаторов для групп SVG

Имена символов Illustrator используются в качестве идентификаторов для символов SVG

Имена графических стилей Illustrator используются в качестве классов CSS

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

Упростите ваши формы, когда это возможно

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

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

По возможности используйте основные формы SVG вместо путей SVG

Использование простых элементов, таких как line , rect и circle имеет ряд существенных преимуществ.

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

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

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

Упростите свои пути

Путь — это не что иное, как массив координатных точек. Упростить путь означает вырезать некоторые из его точек, что приведет к уменьшению данных пути и уменьшению размера файла. Для этого вы можете использовать команду Object > Path > Simplify… или Warp Tool . В обоих случаях главное состоит в том, чтобы максимально уменьшить точки пути без потери качества визуального оформления.

На рисунках ниже вы можете видеть, как процесс упрощения Illustrator уменьшает точки пути с 32 до 23, что составляет около 25%, и как это отражается на коде. Данные пути уменьшаются, в то время как визуальное качество все еще остается на хорошем уровне.

Решите, следует ли преобразовывать текст в пути

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

Если точная отрисовка текста важнее, чем редактируемость, например, в логотипе, вы можете преобразовать его в контуры, используя команду «Текст» Type > Create Outlines или установив этот параметр на панели экспорта, как вы увидите позже.

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

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

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

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

Настройки объекта в Illustrator влияют на то, каким будет файл SVG. Помните следующие рекомендации.

Используйте слои для добавления структуры в файл SVG. Если объект сохраняется в формате SVG, каждый слой преобразуется в групповой элемент (<g>). (Например, слой «Button1» становится <g id="Button1_ver3.0">.) Вложенные слои становятся вложенными группами SVG, а скрытые слои сохраняются со свойством «отображение: нет» стиля SVG.

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

Растровые данные не масштабируются в средстве просмотра SVG и не могут отредактироваться, как другие элементы SVG. Старайтесь не создавать объекты, которые будут растрироваться в файле SVG. Сетчатые градиенты и объекты с градиентной заливкой, использующие эффекты «Растрировать», «Имитация», «Размытие», «Штрихи», «Искажение», «Оформление», «Резкость», «Эскиз», «Стилизация», «Текстура» и «Видео», растрируются при сохранении в формате SVG. Графические стили с этими эффектами также вызывают растрирование. Добавляя графические объекты, используйте эффекты SVG, не вызывающие растрирования.

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

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

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

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

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

Чтобы изменить фильтры SVG, которые Illustrator использует по умолчанию, используйте текстовый редактор для редактирования файла Adobe SVG Filters.svg в папке Documents and Settings/<каталог_пользователя>/Application Data/Adobe/Adobe Illustrator CS5 Settings/<язык>. Можно изменить или удалить существующие определения фильтра, а также добавить новые.

Выберите объект или группу (или назначьте слой на палитре «Слои»).

Для применения эффекта с параметрами по умолчанию выберите эффект в нижней части вложенного меню Эффект > Фильтры SVG .

Для применения эффекта с параметрами пользователя выберите Эффект > Фильтры SVG > Применить фильтр SVG . Выберите эффект в диалоговом окне и нажмите кнопку «Редактировать SVG-фильтр» . Отредактируйте код по умолчанию и нажмите кнопку ОК .

Для создания и применения нового эффекта выберите Эффект > Фильтры SVG > Применить фильтр SVG . В диалоговом окне нажмите кнопку «Новый фильтр SVG» и новый код и нажмите ОК .

Если применяется эффект «Фильтр SVG», Illustrator отображает растрированную версию эффекта на монтажной области. Можно контролировать разрешение миниатюры, изменяя параметр разрешения растрирования документа.

Примечание. Если объект использует несколько эффектов, эффект SVG должен быть последним. Другими словами, он должен отображаться в нижней части палитры «Отображение» (над записью «Прозрачность»). Если SVG-эффект сопровождается другими эффектами, вывод SVG будет осуществлен в виде растрового объекта.

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

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

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

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

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

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

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

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

Итак, у нас есть некий векторный файл в 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также: