Параметры экспорта Adobe Illustrator онлайн урок.


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

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

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

Наиболее распространенным способом сохранения файла в SVG в Adobe Illustrator является выбор файлаFile & gt; Сохранить как...в главном меню.

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

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

Параметры SVG в Adobe Illustrator CC (2017) при выборе файла & gt; Сохранить как...
  • Профили SVG: устанавливает тип документа XML при открытии& lt; svg & gt;тег. SVG 1.1 - это последняя версия, которая охватывает самую широкую поддержку и, вероятно, наиболее подходящий вариант. Все остальное - это либо старая версия, либо подмножество SVG 1.1, и я все же сталкиваюсь с проблемой при ее выборе.
  • Шрифты & gt; Тип: выбор «Преобразовать в контур» гарантирует, что любой напечатанный текст в файле экспортируется - это векторные пути, а не глифы. Символы имеют шанс не быть визуализированными, но векторные дорожки всегда являются большими пальцами вверх.
  • Опции & gt; Местоположение изображения: Если в файле используются растровые изображения (считанные: JPG, PNG, GIF), тогда мы захотим выбрать опцию «Ссылка». В противном случае растровое изображение будет вложено в файл, и это приведет к снижению производительности за счет SVG, увеличив размер файла, включив эти дополнительные активы. Лучше ссылаться на них как на ссылки и не забудьте включить эти исходные файлы в тот же каталог, что и файл SVG.
  • Опции & gt; Местоположение изображения & gt; Сохранение возможностей редактирования Illustrator: Это оказывает огромное влияние на выход SVG-файла. Поскольку вы, вероятно, сохраняете копию «master» здесь, не предназначенную для нас в Интернете, вы оставите это. Это сохранит проприетарные вещи Illustrator (например, руководства) в следующий раз, когда вы откроете файл. Unchecked будет означать, что такие вещи будут удалены и потеряны.
  • Дополнительные параметры & gt; Свойства CSS: я выбираю «Презентационные атрибуты» для этого, потому что он размещает свойства (например, заливки, штрихи и т. Д.) На самом низком уровне специфичности. Например,& lt; path stroke = "black" stroke-width = "2"... & gt;. Это стилирует элемент, но его очень легко переопределить в CSS.
  • Дополнительные параметры & gt; Десятичные места: если вы просмотрели код для& lt; path & gt;, то вы знаете, что значения, определяющие эти фигуры, могут быть суперточными. Однако много раз они слишком точны и добавляют общий размер файла SVG. Так как вы, вероятно, сохраняете главный файл здесь, вы можете держать его достаточно высоким, потому что размер файла не вызывает большого беспокойства.
  • Дополнительные параметры & gt; Кодирование: Я не бафф в кодировке UTF, но оставление этого в «Unicode UTF-8» обеспечивает обратную совместимость. Кроме того, размеры файлов UTF-8, как правило, меньше, чем UTF-16, так что это выигрыш сам по себе.
  • Дополнительные параметры & gt; Отзывчивый: если этот флажок не установлен, будут установлены фиксированные атрибутыheightиwidthв SVG. Я проверяю этот параметр, потому что он позволяет мне устанавливать эти атрибуты либо в коде, либо в CSS.

# Способ 2: Экспорт как

Еще один способ получить SVG из Adobe Illustrator - выбратьFile & gt; Экспорт & gt; Экспортировать как...из главного меню. Тем не менее, есть второй способ добраться туда, используя панель «Действия» в рабочей области Illustrator.

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

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