Как оптимизировать и экспортировать SVG в Adobe Illustrator
Когда вы начнете работать с SVG, важно понять, как создавать, экспортировать и оптимизировать файлы SVG для браузеров, которые будут их отображать.
Однако, прежде чем мы начнем, вам нужно четко понять одну вещь. Оптимизация файла SVG начинается с его создания и продолжается до экспорта. Как и на любой HTML-странице, после исправления трудно исправить плохо построенный 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 или установив этот параметр на панели экспорта, как вы увидите позже.
Имейте в виду, что при преобразовании большого количества текста в пути размер файла может резко увеличиться, поэтому тщательно подумайте перед преобразованием.
Используйте «фильтры SVG» вместо эффектов фильтра Illustrator или Photoshop.
Illustrator предлагает набор фильтров SVG , которые применяются в реальном времени в браузере (« Effect > SVG Filters ). В то время как эффекты Illustrator или Photoshop всегда «запекаются» в ваших растровых изображениях, встроенных в SVG, фильтры SVG могут быть изменены или удалены в любое время с помощью нескольких нажатий клавиш.
Вы также можете создавать повторно используемые фильтры и / или редактировать их через диалоговое окно « Применить фильтр SVG ».
Подогнать артборд к рисунку
Если вы хотите, чтобы ваш SVG отображался предсказуемо, рекомендуется всегда обрезать артборд до чертежа. Размеры монтажной области — это размеры экспортированного видового экрана SVG, и любое пустое пространство в монтажной области будет создаваться как пустое пространство внутри видового экрана.
В зависимости от ситуации вы можете использовать команду « Object > Artboards > Fit to Artwork Bounds или « Object > Artboards > Fit to Selected Art
На изображении ниже левая звезда будет экспортирована с окружающим пустым пространством, тогда как правая звезда будет экспортирована с ее надлежащими размерами.
Экспорт SVG в Illustrator
Начиная с версии 2015.2, Illustrator CC поставляется с новой панелью экспорта, созданной для оптимизированных веб-файлов SVG. В этом разделе мы увидим, как его использовать.
Примечание. Для тех из вас, кто использует более старую версию Illustrator, здесь есть соответствующее руководство .
Когда ваша графика готова к производству, выберите « Файл»> «Экспорт»> «Экспортировать как…» , затем выберите SVG в качестве параметра для типа файла и нажмите кнопку « Экспорт» . Вы должны увидеть следующую панель:
Давайте рассмотрим варианты, представленные более подробно.
стайлинг
Есть три способа стилизовать ваш SVG, и они представлены в первом выпадающем списке.
- Первый заключается в использовании внутреннего CSS (т. Блока ), который обычно считается наилучшим вариантом в соответствии с принципом разделения проблем .
- Второй метод заключается в использовании встроенных стилей CSS (т.е. ).
- И третий способ заключается в использовании атрибутов представления SVG ,
На изображении ниже вы можете увидеть разницу между этими тремя вариантами.
Шрифт
Если вы хотите преобразовать текст в контуры, здесь вы можете указать Illustrator сделать это. Если вы хотите сохранить возможность редактирования текста, выберите опцию SVG. Выделенный текст дает вам полный визуальный контроль над вашей типографикой, но при значительных затратах — размер файла уменьшается, а текст теряет возможность редактирования и поиска.
Примечание. Шрифты SVG будут удалены из SVG 2 и считаются устаревшей функцией с удалением поддержки из браузеров.
Картинки
Здесь вы можете выбрать способ обработки любых растровых изображений в SVG. Вы можете сохранить их как внешние файлы или встроить их в SVG как DataURI . Часто Link — это полезный выбор, поскольку он значительно сокращает размер родительского файла SVG и, следовательно, делает его намного более управляемым в редакторе кода.
Тем не менее, опция Embed имеет одно большое преимущество: встроенные изображения никогда не могут быть связаны или отделены от своего «родительского SVG». SVG, использующие связанные ресурсы, покажут значок отсутствующего изображения при первой загрузке, загрузке или перемещении SVG без его «дочерних изображений».
Имейте это в виду, если вам требуется переносимость в SVG.
Как правило, в будущем вы избежите многих головных болей, если сможете просто избегать использования пиксельной графики в своих SVG-файлах, когда это возможно.
Идентификаторы объектов
Как правило, лучший вариант — выбрать имена слоев , потому что это даст вам значимые имена для ваших отдельных элементов SVG. Minimal использует случайные буквенные числа, а Unique использует большую случайную комбинацию символов.
Десятичная дробь
Эта опция определяет, сколько десятичных знаков будут заполнены вашими координатами после десятичной точки. Более высокие числа означают более точные пути, в то время как наименьшее число дает меньше подробного кода и небольшой размер файла.
Как видно из рисунка ниже, путь с 5 десятичными знаками, если он намного больше, чем тот же путь с 1 десятичным знаком, но визуально идентичен.
Имейте в виду, что здесь речь идет о сотых и тысячных пикселя. Более высокие значения будут необходимы только в том случае, если ваша графика очень мала или требует невероятной точности. В большинстве случаев придерживаться значения 1 знака после запятой — будет лучшим вариантом.
преуменьшать
Установите этот флажок только в том случае, если вы экспортируете окончательную версию графического объекта для производства и уверены, что файл больше не будет редактироваться.
отзывчивый
Теоретически, эта опция удаляет атрибуты width и height из вашего SVG-документа, что делает его более отзывчивым. Тем не менее, в большинстве случаев этого недостаточно для того, чтобы ваш SVG действительно отвечал всем браузерам и особенно IE. Мы рассмотрим решение этой проблемы в следующем уроке.
СОВЕТ : Всегда полезно сохранить исходный файл .ai качестве исходного, а затем экспортировать копии SVG с другими настройками из этого родительского файла.
Когда вы выбираете команду « Export As… , в появившемся диалоговом окне экспорта вы, возможно, заметили дополнительную опцию, которая называется Use Artboards . Это становится полезным, когда вы используете несколько монтажных областей — например, когда вы создаете набор значков — и хотите, чтобы каждая монтажная область экспортировалась как отдельный файл SVG.
Как вы видели выше, во время создания и экспорта вашей SVG происходит большая оптимизация. Однако вы можете дополнительно оптимизировать файл с помощью какого-либо специализированного инструмента, такого как SVGO или его версия SVGOMG с веб-интерфейсом.
Имейте в виду, что вы должны быть осторожны при использовании этих инструментов. Они могут легко нарушить функциональность вашего документа. Я советую использовать ручную оптимизацию, когда это возможно, и использовать инструмент автоматической оптимизации, только если это необходимо и с осторожностью.
Вывод
Я не думаю, что я собираюсь объявить SVG будущим веб-векторной графики. Трудно увидеть ситуацию, когда SVG не продолжает набирать больше силы с течением времени. Если вы еще не погрузились, это будет хорошая и разумная инвестиция, чтобы начать изучать это сейчас.
На горизонте появится SVG 2 с множеством новых мощных функций, которые можно поиграть. Впереди захватывающие времена.
Как сохранить в svg в иллюстраторе
Одна из замечательных особенностей масштабируемой векторной графики (SVG) заключается в том, что ее можно создавать в различных графических программах. Кроме того, поскольку файл основан на XML, вы можете засучить рукава и редактировать файл напрямую или программно с помощью JavaScript
Инструменты для создания файлов SVG
Графические редакторы
Примеры распространенных графических редакторов, которые можно использовать для создания файлов SVG.
Inkscape бесплатен для использования и может быть достойным вариантом, если у вас нет доступа к Illustrator или Sketch. В Интернете есть подробное руководство по использованию Inkscape. Дополнительную информацию о создании файлов SVG в Adobe Illustrator см. в разделе ниже.
Текстовые редакторы и JavaScript
Вы также можете создавать и редактировать файлы SVG, просто открыв текстовый редактор и создав файлы.
Графика SVG должна начинаться с элемента svg:
Между элементом svg вы можете добавить другие формы или контуры svg, такие как круг, прямоугольник, эллипс или путь.
Для библиотек JavaScript доступно множество других возможностей для управления файлами SVG.
Создание файлов SVG в Adobe Illustrator
Возможно, самый простой способ создать сложные файлы SVG — использовать инструмент, с которым вы, вероятно, уже знакомы: Adobe Illustrator. Хотя уже довольно давно можно создавать файлы SVG в Illustrator, в Illustrator CC 2015 были добавлены и оптимизированы функции SVG. Эти изменения включают в себя различные параметры экспорта, более чистый код SVG и возможность копировать и вставлять файлы SVG в текстовый редактор.
SVG — это собственный формат файлов Adobe Illustrator. Начните с создания иллюстрации. Вот пример морды медведя:
Простая иллюстрация медвежьей морды в Illustrator.
Экспорт файла SVG
Вы можете использовать функцию «Сохранить как» для непосредственного сохранения в формате SVG. Выберите «Файл» > «Сохранить как» в строке меню.
Вы можете создать файл, а затем выбрать «Файл» > «Сохранить как», чтобы сохранить файл.
В окне сохранения измените Формат на SVG (svg) и нажмите Сохранить.
Измените формат на SVG.
Параметры SVG
После нажатия кнопки «Сохранить» откроется окно параметров SVG. Это окно предлагает множество вариантов для возни. В большинстве случаев подходят параметры по умолчанию.
- Профили SVG: оставьте выбранным SVG 1.1
- Шрифты. Эти два параметра имеют значение только в том случае, если на графике есть текст. Как правило, вы должны оставить свой тип как SVG вместо того, чтобы преобразовывать его в контуры. Это улучшает доступность. Оставьте эти параметры по умолчанию.
- Местоположения изображений. Это имеет значение только в том случае, если ваша графика содержит какие-либо файлы растровых изображений. Как правило, это неприменимо при создании графики для Интернета. Включение растровой графики в формат SVG полностью исключает цель их использования.
- Сохранить возможности редактирования Illustrator. Не устанавливайте этот флажок. Вы всегда можете сохранить файл ai для последующего редактирования. Вы также сможете открыть SVG в Illustrator. Флажок Сохранение возможностей редактирования добавит в файл ненужную информацию, что затруднит работу с ним в редакторе и увеличит его размер.
Дополнительные параметры
Эта кнопка предоставляет несколько «расширенных» параметров для вашего SVG-файла.
- Свойства CSS. Это повлияет на то, как стилизованные свойства будут записаны в файле SVG. Хотя все четыре варианта будут работать, обычно лучшими вариантами будут либо Элементы стиля, либо Атрибуты стиля. Полное сравнение параметров см. в разделе Демистификация дополнительных параметров Adobe Illustrator для работы с SVG .
- Включить неиспользуемые графические стили: не устанавливайте флажок.
- Десятичные разряды. Это повлияет на точность чисел в вашей графике. Большее количество знаков после запятой приведет к немного большему размеру файла, а использование нескольких знаков после запятой может привести к потере деталей. Имейте в виду, что обычно эффект от этой настройки будет очень тонким.
- Выводить меньше элементов: оставьте флажок.
- Использовать
Кнопка кода SVG
Вы можете нажать эту кнопку в любое время, чтобы сгенерировать текст файла SVG. Он автоматически откроется в текстовом редакторе по умолчанию. Вы можете использовать это, чтобы увидеть, как будет выглядеть ваш окончательный файл, или даже скопировать и вставить текст из него. Мы сохраним наше изображение морды медведя, используя параметр «Элементы стиля» в раскрывающемся списке «Свойства CSS». Все остальные параметры установлены по умолчанию.
Измените свойства CSS на элементы стиля. Это даст нам следующий файл SVG, который мы можем открыть в текстовом редакторе.
Удаление объявления XML и комментариев
Когда Illustrator создает файл SVG, он добавляет две дополнительные строки в начало файла. Первая строка — это XML-декларация. Если вы включаете свой файл SVG в свой HTML, вы можете безопасно удалить эту строку. Впрочем, если вы его не удалите, это ничему не повредит. Вторая строка — это просто HTML-комментарий, добавленный Illustrator для включения информации о том, как была создана графика. Эту строку следует удалить, чтобы уменьшить окончательный размер файла.
Эффективное использование слоев в Illustrator
Хотя приведенный выше файл будет работать нормально, мы можем использовать слои в Illustrator для добавления имен и групп в наш окончательный файл SVG. Слои и группы в Illustrator будут преобразованы в классы и элементы g в файле и помогут нам стилизовать графику с помощью CSS. В исходном файле медведя мы не давали названия слоям и не группировали похожие формы. Когда мы просматриваем файл, трудно сказать, какие фигуры какие. У них странные идентификаторы, такие как XMLID_3. 
Ни один из слоев не имеет имени или группы. Теперь я дал каждому подслою имя. Каждое из имен будет переведено в атрибут id в нашем файле. Я также организовал слои в логические группы. Каждая группа будет преобразована в элемент g. 
Теперь все наши слои имеют имена и логически сгруппированы. Теперь наш экспортированный файл SVG стал более читабельным и готовым к стилю, если мы захотим. То, как именно вы решите организовать файл по группам, будет зависеть от вашей конечной цели. Если вы выполняете какую-либо анимацию или стилизацию с помощью CSS или JavaScript, полезно организовать фигуры в группы, которые можно стилизовать или анимировать вместе.
Ресурсы по использованию слоев Illustrator
Как правило, слои работают так же, как и в Photoshop. Ниже приведены некоторые ресурсы:
Установка границ монтажной области
Настоящая графика, вероятно, не будет занимать всю монтажную область (белый фон) в Illustrator. Если вы экспортируете свой файл SVG, не обращая внимания на это, ваш файл в конечном итоге будет включать все это дополнительное пространство. Хотя это не повлияет на размер файла, это повлияет на то, как ваша графика будет отображаться в браузере. Перед сохранением изображения убедитесь, что монтажная область соответствует изображению. В строке меню выберите «Объект» > «Монтажные области» > «Подогнать к границам обложки». После этого наш файл с медведем выглядит так:
Наша графика после того, как мы подогнали монтажную область к иллюстрации.
В последнем выпуске Illustrator 2015 реализован совершенно новый способ создания современного и эффективного кода SVG. Новый вариант экспорта кода SVG включает улучшенную поддержку рабочих процессов в Интернете и на мобильных устройствах, а также позволяет создавать иллюстрации SVG более высокого качества.
- Новые параметры экспорта: экспорт простого кода SVG, который можно легко редактировать; уменьшенный SVG для уменьшения размера кода; и уникальные идентификаторы
- Вывод более высокого качества художественных объектов SVG, таких как фигуры, градиенты, узоры, символы и маскированные объекты.
- Улучшенная обработка текста, преобразованного в контуры, и текст меньшего размера.
- Улучшен экспорт монтажных областей и обрезка по границам артов.
- Возможность экспорта отдельных компонентов дизайна
- Полная поддержка режимов прозрачности и наложения
Экспорт изображения в SVG
Чтобы сохранить обложку в формате SVG, выберите «Файл» > «Экспорт» > «SVG (svg)».
Отметьте «Использовать монтажные области», если хотите экспортировать содержимое монтажных областей в виде отдельных файлов SVG. Нажмите «Экспорт», чтобы открыть диалоговое окно «Параметры SVG».
Примечание. Если флажок «Использовать монтажные области» не установлен, область просмотра файла SVG будет установлена на основе объединенных границ всех объектов в документе.
Экспорт отдельных компонентов
Экспорт SVG также позволяет экспортировать отдельные компоненты или целые разделы дизайна, а не всю монтажную область.
Чтобы экспортировать раздел или компонент дизайна в формат SVG, выберите его, а затем выберите «Файл» > «Экспортировать выделенное» > «SVG (svg)».
Введите параметры SVG
В параметрах SVG выберите настройки, подходящие для вашей иллюстрации, из меню CSS, шрифта и других элементов.
Выберите «Свернуть», чтобы сгенерировать SVG-код с минимальными идентификаторами, отступами, линиями и пробелами.
Чтобы узнать больше о параметрах SVG, см. SVG.
Примечание. После экспорта кода SVG не открывайте его повторно в Illustrator для дальнейшего редактирования. Вместо этого откройте исходный документ Illustrator (.ai) и снова экспортируйте в SVG.
DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.
Допустим, вы создали прекрасную векторную иллюстрацию в Adobe Illustrator. Или вы использовали Illustrator для улучшения существующей графики. Или буквально по любой причине у вас есть файл, открытый в Adobe Illustrator, который вы в конечном итоге хотите использовать в Интернете как SVG.
Существует несколько разных способов получить SVG из Illustrator, каждый из которых немного отличается. Давайте посмотрим.
TL;DR: экспорт, например «Файл» > «Экспорт» > «Экспортировать как. SVG», а затем оптимизация — лучший выбор для Интернета.
Метод «Сохранить как…»
Illustrator поддерживает SVG как первоклассный формат файлов. Вы можете «Файл» > «Сохранить как…» и выбрать «SVG» в качестве альтернативы стандартному формату файла `.ai`.
Есть даже кнопка в параметрах сохранения SVG, которая называется «Код SVG…». Вы можете нажать, чтобы Illustrator показал вам код перед его сохранением, предположительно для целей копирования и вставки.
Если вы немного поищете в Интернете о различиях между сохранением в разных форматах из Illustrator, вы найдете много общей информации о том, что SVG предназначен для использования во ВСЕМИРНОЙ СЕТИ, поэтому, если вы собираетесь использовать это изображение, это формат, в котором вы должны сохранить.
Будьте осторожны. Сохранение в формате SVG из Illustrator — это нормально, но файл абсолютно не готов для прямого использования в Интернете. Когда вы «Сохранить как…» из Illustrator как SVG, главная задача Illustrator заключается в том, чтобы вы могли снова открыть этот файл в Illustrator так же, как вы его оставили.
Например, Illustrator имеет проприетарные функции, не являющиеся частью SVG. Простой пример: гиды. Таким образом, вы не потеряете свои направляющие, сохраненные в формате SVG, они сохраняются просто отлично. Но руководства не имеют смысла в SVG в Интернете, поэтому вы будете отправлять бесполезные данные, если будете использовать SVG, сохраненный таким образом, непосредственно в Интернете.
Размер файла SVG, сохраненного в Illustrator с помощью команды «Сохранить как…», может быть на несколько порядков больше, чем размер действительно готовой для Интернета версии. Взгляните на логотип CSS-Tricks «Сохранить как…», созданный и экспортированный для Интернета.
Нам не совсем понятно, почему «Сохранить как…» в формате SVG было бы хорошей идеей. Вы можете просто сохранить файлы как `.ai`, пока не захотите экспортировать их в Интернет. Или, если вы сохраняете в формате SVG, вы также можете установить флажок «Сохранить возможности редактирования Illustrator» и использовать соглашение об именах, которое ясно, что это «исходный» файл, а не готовый для Интернета.
Подождите, «экспортированная версия»? Давайте посмотрим на это дальше.
Метод «Экспортировать как»
Файл > Экспорт > Экспортировать как… сильно отличается. Вы выполняете «экспорт», и подразумевается, что созданный файл больше не является удобным для Illustrator и редактируемым файлом, а является новым файлом, специально предназначенным для какой-то другой цели.
Например, JPG является одним из вариантов. Вы не ожидаете, что сможете редактировать векторную графику после ее экспорта в формате JPG.
Здесь также можно использовать SVG. Вывод сильно отличается от «Сохранить как…». Экспортированные SVG на самом деле очень близки к веб-готовности. Здесь нет странного типа документа, множества метаданных или проприетарных вещей Illustrator. Экспортированный SVG, скорее всего, не откроется в Illustrator точно так же, как в исходном файле.
Появится экран с минимальными параметрами экспорта, например:
Параметры, показанные там, являются хорошими значениями по умолчанию. Краткий обзор:
- Стиль: «Атрибуты представления» означают такие элементы, как fill: red; а не «Встроенные стили», что означает style=»fill: red;». Атрибуты представления легче переопределить в CSS. Встроенные стили обеспечивают большую гибкость стилей. Существует также возможность экспортировать стили в виде блока в SVG, что может быть эффективным для SVG с большим количеством похожих элементов.
- Шрифт: «SVG» означает использование
Такой способ экспорта определенно удобен для Интернета. Хотя SVGO все еще может выжать из него немного больше эффективности, конечно, в зависимости от графики.
Метод «Экспорт для экранов»
Начиная с версии CC 2017, в Illustrator есть метод «Файл» > «Экспорт» > «Экспорт для экранов…», созданный специально для экспорта на цифровые устройства. Я бы сказал «веб», но в нем есть функции экспорта для iOS и Android, так что «Экраны», как говорится, уместен. 
Открывается диалоговое окно параметров, позволяющее нам выбирать изображения различными способами и экспортировать нужные части в нужных нам форматах. 
Это действительно удобный интерфейс! Мы можем экспортировать только части нашей иллюстрации не только в SVG, но и в другие форматы одновременно. Представьте систему значков. 20 монтажных областей в одном документе, и с помощью одной команды вы экспортируете их все в формате SVG и нескольких разрешениях PNG. Довольно мило. Похоже, что внутри используется та же система, что и при экспорте, поэтому вы получите вывод, оптимизированный для Интернета. Монтажные области — это один из способов разделения иллюстраций для экспорта по отдельности. Существует также панель «Экспорт ресурсов», которая позволяет перетаскивать части изображения, предназначенные для вывода отдельно. Метод «Копировать прямо с монтажной области»
Кстати, о выборе отдельных фрагментов изображения, предназначенных для использования в формате SVG, можно сказать, что существует менее известный способ извлечения фрагментов, который так же прост, как «Правка» > «Копировать». После копирования в вашем буфере обмена появится встроенный код SVG, который вы можете вставить как текст. Код, который вы получите, немного отличается от любого метода, который мы рассматривали до сих пор. Однако он наиболее близок к формату «Сохранить как…», поскольку вы получаете тип документа XML и тому подобное. Это не оптимизированный для Интернета формат, который мы получаем при экспорте. У него есть собственный viewBox, обрезанный точно по краям элементов. Если вы используете это, чтобы вставить SVG прямо в ваш HTML, запланируйте небольшую ручную очистку кода. Теперь, когда у вас есть SVG…
- Возможно, вы собираете отдельные файлы значков SVG для использования в системе значков SVG. Например, с помощью инструмента сборки для их обработки в один файл, полный от s до .
- Возможно, вам нужно было использовать `.svg` в качестве .
- Возможно, вам нужно было использовать `.svg` в качестве фонового изображения в CSS.
- Возможно, вы собираетесь вставить код SVG в HTML напрямую как встроенный SVG.
Существует множество способов использования SVG, но всегда нужно начинать с того, чтобы заставить SVG работать в первую очередь.
Это не отрывок, а скорее напоминание о том, что я часто просматриваю. При создании файлов SVG в Adobe Illustrator существует несколько различных способов экспорта файлов. Оба метода включают в себя несколько параметров, некоторые из которых я совершенно забыл, что они означают и что выбрать.
Способ 1. Сохранить как…
Вероятно, вы не стали бы использовать этот метод для сохранения SVG для использования в Интернете. Это в основном для сохранения мастер-документа. На самом деле, вы можете просто сохранить напрямую в формате Illustrator. Вы можете использовать некоторые другие параметры экспорта для экспорта в Интернет.
Самый распространенный способ сохранить файл в формате SVG в Adobe Illustrator — выбрать «Файл» > «Сохранить как». пункт главного меню.
Illustrator откроет диалоговое окно с вопросом, как назвать файл и где его сохранить. Что еще более важно, он также спрашивает, какой тип файла сохранить, в данном случае это SVG. Не сжатый SVG (svgz). Обычный SVG.
Нажмите кнопку «Сохранить», и появится другой набор параметров. Вот где моя память имеет тенденцию подводить меня, и мне приходится рыскать в Интернете в поисках ответов. Вот скриншот совершенно оптимального способа сохранения файла SVG в Adobe Illustrator.
- Профили SVG. Задает тип XML-документа в открывающем теге. СВГ 1.1 является последней версией, обеспечивает наиболее широкий спектр поддержки и, вероятно, является наиболее подходящим вариантом. Все остальное либо более старая версия, либо подмножество SVG 1.1, и я еще не сталкивался с проблемой при его выборе.
- Шрифты > Тип: выбор «Преобразовать в контур» гарантирует, что любой печатный текст в файле будет экспортироваться в виде векторных контуров, а не глифов. Глифы могут не отображаться, но векторные контуры всегда хороши.
- Параметры > Расположение изображения. Если в файле используются растровые изображения (читай: JPG, PNG, GIF), то нам нужно выбрать параметр «Ссылка». В противном случае растровое изображение будет встроено в файл, что приведет к снижению производительности SVG за счет увеличения размера файла для включения этих дополнительных ресурсов. Лучше ссылаться на них как на ссылки и обязательно включать эти исходные файлы в тот же каталог, что и файл SVG.
- Параметры > Расположение изображения > Сохранить возможности редактирования Illustrator. Этот параметр оказывает огромное влияние на вывод файла SVG. Поскольку вы, вероятно, сохраняете здесь «основную» копию, не предназначенную для нас в Интернете, оставьте этот флажок установленным. Это сохранит проприетарные элементы Illustrator (например, направляющие) для следующего открытия файла. Если флажок не установлен, такие вещи будут удалены и потеряны.
- Дополнительные параметры > Свойства CSS. Я выбираю для этого параметра «Атрибуты представления», поскольку в нем свойства (например, заливки, обводки и т. д.) размещаются на самом низком уровне специфичности. Например . Это стилизует элемент, но его очень легко переопределить в CSS.
- Дополнительные параметры > Десятичные знаки. Если вы просматривали код для , то знаете, что значения, определяющие эти фигуры, могут быть очень точными. Однако во многих случаях они слишком точны и увеличивают общий размер файла SVG. Поскольку вы, скорее всего, сохраняете мастер-файл здесь, вы можете оставить это значение довольно высоким, поскольку размер файла не имеет большого значения.
- Дополнительные параметры > Кодировка. Я не сторонник кодировки UTF, но если оставить значение «Unicode UTF-8», это обеспечит обратную совместимость. Кроме того, размеры файлов UTF-8, как правило, меньше, чем UTF-16, так что это само по себе является преимуществом.
- Дополнительные параметры > Адаптивность. Если этот флажок не установлен, в SVG будут установлены фиксированные атрибуты высоты и ширины. Я отмечаю этот параметр, потому что он позволяет установить эти атрибуты либо в коде, либо в CSS.
Способ 2: экспортировать как
Еще один способ получить SVG из Adobe Illustrator — выбрать «Файл» > «Экспорт» > «Экспортировать как». вариант из главного меню. Однако есть и второй способ сделать это с помощью панели «Действия» в рабочей среде Illustrator.
Этот вариант идеален, если вы знаете, что собираетесь использовать этот файл непосредственно в Интернете и не планируете вносить изменения в дизайн позже. Он предоставляет гораздо меньше настроек и пару опций, которые позволяют файлу дополнительно оптимизировать файл для повышения производительности. На самом деле, лучше делать это на копии файла, а не на самом мастер-файле, чтобы одна версия могла быть открыта и отредактирована позже в Illustrator, а другая больше подходила для работы на рабочем веб-сайте.
Когда вы начинаете работать с SVG, важно понимать, как создавать, экспортировать и оптимизировать файлы SVG для браузеров, которые будут их отображать.
Однако, прежде чем мы начнем, вам нужно четко понять одну вещь. Оптимизация файла SVG начинается с его создания и продолжается вплоть до экспорта. Как и любую веб-страницу HTML, плохо построенный файл SVG сложно исправить после его завершения.
Конечно, вы можете использовать инструменты оптимизации после экспорта, но этот автоматизированный подход может повредить ваш файл самым неожиданным образом. Наличие твердых практических знаний о хороших концепциях ручной оптимизации 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
Использование простых элементов, таких как линия, прямоугольник и круг, имеет ряд существенных преимуществ.
Во-первых, простые формы намного понятнее для человека — самоочевидно, что круг — это круг, когда мы видим его в нашем коде SVG, но код пути может быть любым, пока мы не увидим его отрисовку.
Во-вторых, простые фигуры почти всегда создают файлы меньшего размера и меньше кода, что облегчает их обслуживание и редактирование. Вы также можете легче управлять ими с помощью их прямых атрибутов, таких как x , y , cx , cy , а не координат точек, как с путями.
Чтобы понять, что я имею в виду, на изображении ниже вы можете увидеть простую круглую форму, определенную один раз как элемент круга SVG и один раз как путь SVG. Хотя они отображаются одинаково, ясно, что форма SVG меньше и более универсальна. Имейте в виду, что некоторые графические редакторы — например, расширение экспорта SVG Fireworks — автоматически преобразовывают фигуры SVG в контуры при экспорте. Очевидно, постарайтесь избежать этого.
Упростите пути
Путь — это не что иное, как массив координатных точек. Упростить путь означает вырезать некоторые его точки, что приведет к меньшему количеству данных пути и меньшему размеру файла. Для этого вы можете использовать команду Object > Path > Simplify… или Warp Tool. В обоих случаях главное максимально сократить точки пути без потери качества визуального вида.
На изображениях ниже вы можете увидеть, как процесс упрощения в Illustrator сокращает количество точек контура с 32 до 23, что составляет примерно 25 %, и как это отражается на коде. Данные пути уменьшаются, в то время как визуальное качество остается на хорошем уровне.
Решите, следует ли преобразовывать текст в пути
В графике SVG текст является самостоятельным элементом, поэтому он доступен для поиска, доступен и легко редактируется. Это ценное качество для текста. Однако, если вы хотите, чтобы ваш текст везде выглядел точно так, как вы его создали, ваш конечный пользователь должен иметь доступ к правильным шрифтам. Это означает выбор общих шрифтов, что ограничивает ваши творческие способности, или предоставление веб-шрифта.
Если точная отрисовка текста важнее возможности редактирования, например, в логотипе, вы можете преобразовать его в контуры, используя команду «Текст» > «Создать контуры» или установив этот параметр на панели экспорта, как вы увидите позже.
Имейте в виду, что при преобразовании большого количества текста в пути размер файла может резко увеличиться, поэтому тщательно подумайте перед преобразованием.
Используйте фильтры SVG вместо эффектов фильтров Illustrator или Photoshop
Illustrator предлагает набор фильтров SVG, которые применяются в реальном времени в браузере (Эффект > Фильтры SVG).Хотя эффекты Illustrator или Photoshop всегда «запекаются» в ваших растровых изображениях, встроенных в SVG, фильтры SVG можно изменить или удалить в любое время несколькими нажатиями клавиш.
Вы также можете создавать повторно используемые фильтры и/или редактировать их в диалоговом окне «Применить фильтр SVG».
Подогнать монтажную область под рисунок
Если вы хотите, чтобы ваш SVG отображался предсказуемо, рекомендуется всегда перед этим обрезать монтажную область до рисунка. Размеры монтажной области — это размеры экспортированного окна просмотра SVG, и любое пустое пространство на монтажной области будет создано как пустое пространство внутри окна просмотра.
В зависимости от ситуации вы можете использовать команду «Объект» > «Монтажные области» > «Подогнать к границам обложки» или «Объект» > «Монтажные области» > «Подогнать к выбранному рисунку».
На изображении ниже левая звезда будет экспортирована с окружающим пустым пространством, а правая звезда будет экспортирована с правильными размерами.
Экспорт SVG в Illustrator
Начиная с версии 2015.2, Illustrator CC поставляется с новой панелью экспорта, созданной для файлов SVG, оптимизированных для Интернета. В этом разделе мы увидим, как его использовать.
Примечание. Для тех из вас, кто использует более раннюю версию Illustrator, вот подходящий учебник.
Когда ваша графика будет готова к производству, выберите команду «Файл» > «Экспорт» > «Экспортировать как…», затем выберите SVG в качестве параметра для типа файла и нажмите кнопку «Экспорт». Вы должны увидеть следующую панель:
Давайте рассмотрим представленные варианты более подробно.
Стили
Существует три способа оформления SVG, и они представлены в первом раскрывающемся списке.
- Во-первых, это использование внутреннего CSS (т. е. блока), который обычно считается лучшим вариантом в соответствии с принципом разделения ответственности.
- Второй способ заключается в использовании встроенных стилей CSS (т. е. ).
- И третий способ – использование атрибутов представления SVG.
На изображении ниже вы можете увидеть разницу между этими тремя параметрами.
Если вы хотите преобразовать текст в контуры, здесь вы можете указать Illustrator сделать это. Если вы хотите сохранить возможность редактирования текста, выберите параметр SVG. Контурный текст дает вам полный визуальный контроль над типографикой, но за это приходится платить значительную цену: размеры файлов увеличиваются, а текст становится недоступным для редактирования и поиска.
Примечание. Шрифты SVG будут удалены из SVG 2 и считаются устаревшей функцией, поддержка которой будет прекращена в браузерах.
Изображения
Здесь вы можете выбрать способ обработки любых растровых изображений в SVG. Вы можете сохранить их как внешние файлы или встроить в SVG как DataURI. Часто ссылка является полезным выбором, поскольку она значительно уменьшает размер родительского файла SVG и, таким образом, делает его более управляемым в редакторе кода.
Однако у варианта «Встроить» есть одно большое преимущество: встроенные изображения никогда не могут быть отсоединены или отделены от своего «родительского SVG». SVG, использующие связанные ресурсы, будут отображать значок отсутствующего изображения при первой загрузке, загрузке или перемещении SVG без «дочерних изображений».
Имейте это в виду, если вам нужна переносимость в SVG.
Как правило, вы избежите многих головных болей в будущем, если сможете просто по возможности избегать использования пиксельной графики в SVG.
Идентификаторы объектов
Как правило, лучше всего выбрать «Имена слоев», поскольку это даст вам осмысленные имена для ваших отдельных элементов SVG. Минимальный использует случайные буквы и цифры, а Уникальный использует большую случайную комбинацию символов.
Десятичный
Эта опция определяет, сколько десятичных разрядов будут заполнены вашими координатами после запятой. Более высокие числа означают более точные пути, а наименьшее число приводит к менее подробному коду и меньшему размеру файла.
Как видно из рисунка ниже, путь с 5 знаками после запятой намного больше, чем тот же путь с 1 знаком после запятой, но визуально идентичен.
Имейте в виду, что здесь речь идет о сотых и тысячных долях пикселя.Более высокие значения будут необходимы только в том случае, если ваша графика очень маленькая или требует невероятной точности. В большинстве случаев придерживаться значения 1 знака после запятой — будет лучшим вариантом.
Уменьшить
Отметьте этот параметр, только если вы экспортируете окончательную версию графики для производства и уверены, что файл больше не будет редактироваться.
Адаптивный
Теоретически этот параметр удаляет атрибуты ширины и высоты из документа SVG, что делает его более отзывчивым. Однако в большинстве случаев этого недостаточно, чтобы сделать ваш SVG действительно отзывчивым для всех браузеров и особенно для IE. Мы рассмотрим решение этой проблемы в следующем руководстве.
СОВЕТ. Всегда полезно сохранить исходный файл .ai в качестве источника, а затем экспортировать копии SVG с другими настройками из этого родительского файла.
При выборе команды «Экспортировать как…» в появившемся диалоговом окне экспорта вы, возможно, заметили дополнительную опцию «Использовать монтажные области». Это становится полезным, когда вы используете несколько монтажных областей — например, когда создаете набор значков — и хотите, чтобы каждая монтажная область экспортировалась как отдельный файл SVG.
Как вы видели выше, во время создания и экспорта вашего SVG происходит много оптимизаций. Однако вы можете дополнительно оптимизировать файл с помощью какого-либо специализированного инструмента, такого как SVGO или его веб-версия SVGOMG с графическим интерфейсом.
Имейте в виду, что вам нужно соблюдать осторожность при использовании этих инструментов. Они могут легко нарушить функциональность вашего документа. Мой совет: используйте оптимизацию вручную, когда это возможно, и используйте инструмент автоматической оптимизации только в случае необходимости и с осторожностью.
Заключение
Я не думаю, что рискну, объявив SVG будущим веб-векторной графики. Трудно представить себе ситуацию, когда SVG не продолжает набирать силу с течением времени. Если вы еще не погрузились в нее, будет хорошей и разумной инвестицией начать изучать ее сейчас.
У нас на горизонте появляется SVG 2 с множеством мощных новых функций, которыми можно играть с желанием. Впереди захватывающие времена.
Читайте также:
- Как сделать файл dll из txt
- Помощник по загрузке видео, как удалить qr-код
- Зажигалка USB не работает
- Самый мощный ноутбук 2021 года
- Как добавить текст в Sony Vegas
Как правильно сохранить 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.
Примечание.
Чтобы изменить фильтры SVG, которые Illustrator использует по умолчанию, используйте текстовый редактор для редактирования файла Adobe SVG Filters.svg в папке Documents and Settings//Application Data/Adobe/Adobe Illustrator Settings/. Можно изменить или удалить существующие определения фильтра, а также добавить новые.
Сохранение иллюстраций
При сохранении или экспорте иллюстраций Illustrator записывает их данные в файл. Структура данных зависит от выбранного пользователем формата файла.
Существует пять базовых форматов файлов для сохранения иллюстрации: AI, PDF, EPS, FXG и SVG. Эти форматы именуются собственными форматами, поскольку в них могут быть сохранены все данные Illustrator, в том числе несколько монтажных областей (при использовании форматов PDF и SVG необходимо выбрать параметр «Сохранять возможность редактирования в программе Illustrator», чтобы сохранить все данные Illustrator). Форматы EPS и FXG позволяют сохранять отдельные монтажные области в виде автономных файлов. В формате SVG сохраняется только активная монтажная область, однако отображается содержимое всех монтажных областей.
Можно также экспортировать иллюстрацию в разных форматах для использования вне программы Illustrator. Такие форматы называются неисконными, поскольку Illustrator не сможет извлечь все данные, если файл будет заново открыт в Illustrator. По этой причине рекомендуется сохранять иллюстрацию в формате AI до тех пор, пока работа над ней не будет закончена, и лишь потом экспортировать иллюстрацию в нужный формат.
Примечание.
При сохранении иллюстрации, включающей связанные файлы EPS, возможно получение сообщения об ошибке, если эти файлы были сохранены в двоичном формате (например, в стандартном формате EPS для Photoshop). В таком случае можно повторно сохранить файлы EPS в формате ASCII, встроить связанные файлы в иллюстрацию Illustrator или сохранить иллюстрацию в формате AI или PDF вместо формата EPS.
Видеоролик с инструкциями по сохранению файлов в веб-формате см. в разделе Сохранение иллюстраций для Интернета.
Сохранение в формате Illustrator
Если в документе содержится несколько монтажных областей и требуется их сохранение в предыдущей версии Illustrator, выберите функцию сохранения каждой монтажной области в отдельный файл или объединения содержимого всех монтажных областей в один файл.
Выберите команду «Файл» > «Сохранить как» или «Файл» > «Сохранить копию».
Введите имя файла и выберите папку для сохранения.
Выберите в качестве формата файла формат Illustrator (*.AI) и нажмите кнопку «Сохранить».
В диалоговом окне «Параметры Illustrator» задайте нужные параметры и нажмите кнопку «ОК».
Определяет версию Illustrator, совместимость с которой необходимо обеспечить при сохранении файла. Для получения более подробной информации см. раздел Сохранение иллюстрации в старой версии.
Сократить знаковый состав шрифтов, если используется символов меньше чем
Определяет, должен ли быть встроен весь шрифт (а не только символы, использованные в документе) на основе процентной доли символов шрифта, использованных в документе. Например, если шрифт содержит 1000 символов, но в документе используется только 10 из них, возможно, встраивание всего шрифта не требуется, чтобы не увеличивать размер файла.
Создать PDF-совместимый файл
Сохраняет представление документа в формате PDF в файле Illustrator. Выберите этот параметр, если необходимо создать файл Illustrator, совместимый с другими приложениями Adobe.
Включить связанные файлы
Встраивает файлы, связанные с иллюстрацией.
Встроить ICC-профили
Создает документ, в котором используется управление цветом.
Применить сжатие
Выполняет сжатие данных PDF в файле Illustrator. При использовании сжатия время, необходимое для сохранения документа, увеличивается, поэтому отмените выбор этого параметра, если сохранение файлов осуществляется слишком медленно (от 8 до 15 минут).
Сохранить каждую монтажную область в отдельный файл
Сохранение каждой монтажной области в отдельном файле. При этом также создается отдельный главный файл, включающий все монтажные области. В этот файл также включено все содержимое, затрагивающее какую-либо монтажную область. Если требуется сместить иллюстрацию и подогнать ее под размер одной монтажной области, будет выдано соответствующее предупреждение. Если этот параметр не выбран, то монтажные области будут объединены в один документ и преобразованы в объекты «направляющие» и (в Illustrator CS3) области кадрирования. Размер монтажной области, используемой для сохраненного файла, берется из стартового профиля документа по умолчанию.
Параметры прозрачности
Определяет, что происходит с прозрачными объектами при выборе более ранней версии формата Illustrator, чем 9.0. Выберите параметр «Сохранять контуры», чтобы удалить эффекты прозрачности и установить для прозрачной иллюстраций непрозрачность 100 % и режим наложения «Нормальный». Выберите параметр «Сохранять оформление и наложение цветов», чтобы сохранить наложение цветов, не взаимодействующее с прозрачными объектами. Выполняется сведение наложений, взаимодействующих с прозрачными объектами.
Примечание.
Если иллюстрация содержит сложные перекрывающиеся области и необходимо обеспечить вывод при высоком разрешении, нажмите кнопку «Отмена» и задайте параметры растрирования, прежде чем продолжить.
Сохранение иллюстрации в старой версии
По умолчанию новые документы Illustrator (.ai) и Illustrator EPS (.eps) теперь сохраняются в формате последней версии Illustrator. Однако если вы решите сохранить документы в более ранней (старой) версии, некоторые данные могут быть потеряны, поскольку устаревшие форматы поддерживают не все функции текущей версии Illustrator. При выборе версии, отличной от текущей, некоторые параметры сохранения окажутся недоступными, а часть данных будет изменена. Прежде чем продолжить, обязательно прочтите предупреждения.
Для беспроблемной работы рекомендуется сохранять документы Illustrator в последней версии.
Сохранение в фоновом режиме
Illustrator запускает процесс сохранения AI-файлов в фоновом режиме. Вы можете продолжить работу, даже если выполняется сохранение. Если файл небольшой, вы можете даже не заметить фоновый процесс. Однако в случае больших файлов сохранение в фоновом режиме экономит много времени и повышает продуктивность.