Как сохранить в svg в иллюстраторе

Обновлено: 21.11.2024

Одна из замечательных особенностей масштабируемой векторной графики (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, а другая больше подходила для работы на рабочем веб-сайте.< /p>

Когда вы начинаете работать с 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, и они представлены в первом раскрывающемся списке.

  1. Во-первых, это использование внутреннего CSS (т. е. блока), который обычно считается лучшим вариантом в соответствии с принципом разделения ответственности.
  2. Второй способ заключается в использовании встроенных стилей CSS (т. е. ).
  3. И третий способ – использование атрибутов представления 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 с множеством мощных новых функций, которыми можно играть с желанием. Впереди захватывающие времена.

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