Параметры экспорта Adobe Illustrator - CSS-хитрости

Anonim

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

Метод 1. Сохранить как…

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

Самый распространенный способ сохранить файл как SVG в Adobe Illustrator - выбрать соответствующий File > Save As… параметр в главном меню.

Illustrator откроет диалоговое окно с вопросом, как назвать файл и где его сохранить. Что еще более важно, он также спрашивает, какой тип файла сохранить, в данном случае это SVG. Не сжатый SVG (svgz). Обычный SVG.

Нажмите кнопку «Сохранить», и появится другой набор параметров. Именно здесь моя память подводит меня, и мне приходится рыскать по сети в поисках ответов. Вот скриншот идеально оптимального способа сохранить файл SVG в Adobe Illustrator.

Параметры SVG в Adobe Illustrator CC (2017) при выборе «Файл»> «Сохранить как…»
  • Профили SVG : устанавливает тип документа XML для открывающего тега. SVG 1.1 - последняя версия, охватывает самую широкую поддержку и, вероятно, является наиболее подходящим вариантом. Все остальное - это либо более старая версия, либо подмножество SVG 1.1, и я еще не столкнулся с проблемой при ее выборе.
  • Шрифты> Тип : выбор «Преобразовать в контур» гарантирует, что любой набранный текст в файле будет экспортирован в виде векторных путей, а не глифов. Глифы могут не отображаться, но векторные пути всегда вызывают большой палец вверх.
  • Параметры> Расположение изображения : если в файле используются растровые изображения (читай: JPG.webp, PNG, GIF), тогда мы захотим выбрать опцию «Связать». В противном случае растровое изображение будет встроено в файл, что лишает преимущества производительности прямо из SVG за счет увеличения размера файла для включения этих дополнительных ресурсов. Лучше ссылаться на них как на ссылки и обязательно включать эти исходные файлы в тот же каталог, что и файл SVG.
  • «Параметры»> «Расположение изображения»> «Сохранить возможности редактирования в Illustrator» . Этот параметр оказывает огромное влияние на вывод файла SVG. Поскольку вы, вероятно, сохраняете здесь «главную» копию, не предназначенную для нас в Интернете, оставьте этот флажок установленным. Это сохранит проприетарные вещи Illustrator (например, руководства) для следующего открытия файла. Если флажок не установлен, такие вещи будут удалены и потеряны.
  • Дополнительные параметры> Свойства CSS : я выбираю для этого «Презентационные атрибуты», потому что он помещает свойства (например, заливки, штрихи и т. Д.) На самый низкий уровень специфичности. Например . Это стилизует элемент, но его очень легко переопределить в CSS.
  • Дополнительные параметры> Десятичные разряды : если вы просматривали код для a , то знаете, что значения, определяющие эти формы, могут быть очень точными. Однако во многих случаях они слишком точны и увеличивают общий размер файла SVG. Поскольку вы, вероятно, сохраняете здесь мастер-файл, вы можете оставить его довольно высоким, потому что размер файла не имеет большого значения.
  • Дополнительные параметры> Кодировка : я не фанат кодировки UTF, но оставив это значение «Unicode UTF-8», мы обеспечим обратную совместимость. Кроме того, размеры файлов UTF-8 обычно меньше, чем UTF-16, так что это уже само по себе выигрыш.
  • Дополнительные параметры> Ответные : Если этого не сделать набор будет фиксированной heightи widthатрибуты на SVG. Я выбираю эту опцию, потому что она позволяет мне устанавливать эти атрибуты либо в коде, либо в CSS.

Метод 2: Экспорт как

Еще один способ получить SVG из Adobe Illustrator - выбрать соответствующий File > Export > Export As… параметр в главном меню. Однако есть второй способ добиться этого - использовать панель «Действия» в рабочем пространстве Illustrator.

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

Параметры SVG в Adobe Illustrator CC (2017) при выборе «Файл»> «Экспорт»> «Экспортировать как…»
  • Стилизация : мы рассмотрели это ранее в настройках метода 1, но я выбираю здесь «Атрибуты представления», потому что это способ упорядочить свойства по атрибутам самого высокого уровня. Это добавляет порядок разметке, гибкость в нашей способности стилизовать последующие атрибуты с помощью CSS и часто приводит к уменьшению размеров файлов.
  • Шрифт : это еще один, который мы рассмотрели выше, но выбор «Преобразовать в контуры» меняет местами глифы на векторные контуры для символов, что обеспечивает правильное отображение текста.
  • Изображения : это еще одна тема, которую мы рассмотрели выше, но выбор «Связать» предотвратит упаковку встроенных растровых изображений в SVG, что сделает файл намного больше.
  • Идентификаторы объектов : этот параметр дает Illustrator порядок действий для именования идентификаторов в разметке. Вы можете указать ему называть идентификаторы в зависимости от того, как слои названы в файле.
  • Десятичный : меньшее количество десятичных знаков в коде означает меньший размер файла. Установка этого параметра на 1идеальный вариант, во многих случаях это нормально и не будет иметь заметных различий в дизайне, но, 2как правило, безопасно. В любом случае стоит проверить, как отображается SVG.
  • Minify : Да, пожалуйста! Это сокращает код, чтобы уменьшить количество пробелов и повысить производительность в Интернете, так же, как минимизация CSS.
  • Отзывчивый : Точно так же как в первом способе, выбирая этот вариант является идеальным , поскольку фиксированные heightи widthатрибуты в противном случае будут размещены на SVG.