Дизайнерам после разработки векторной графики с помощью Adobe Illustrator необходимо использовать ее для экспорта в графический формат SVG, чтобы их можно было использовать в Интернете.
Хотя существуют разные способы экспорта SVG с помощью Adobe Illustrator, давайте поговорим о различиях между этими методами.
Метод "Сохранить как"
Наиболее распространенный способ экспорта SVG с помощью Adobe Illustrator — использоватьFile > Save As...способ экспорта файлов в формате SVG.
При выборе сохранения в формате SVG появится диалоговое окно сSVG codeНажмите кнопку, чтобы отобразить код SVG перед сохранением в формате SVG, скопируйте и вставьте его непосредственно в редактор кода для использования, нет необходимости сохранять файл SVG.
Если вы ищете в Интернете информацию о том, как Illustrator сохраняет SVG, большая часть информации предлагает вам сохранить SVG напрямую, используя этот метод, потому что SVG — это стандартный графический формат, признанный W3C.
Следует отметить, что, хотя с SVG, сохраненным упомянутым выше методом, проблем нет, но использовать его непосредственно в Интернете по-прежнему проблематично. когда вы используетеFile > Save As...Когда метод сохраняется в формате SVG, Illustrator может редактировать файл в Illustrator для вашего удобства, поэтому он не оптимизируется при сохранении.
Например, когда вы используетеFile > Save As...При сохранении SVG Illustrator включит в SVG множество дополнительных данных, что обычно не вызывает проблем. Однако для Интернета эта информация не имеет смысла и увеличивает объем SVG. SVG, экспортируемый с помощью этого метода, намного больше, чем при использовании метода сохранения SVG специально для Интернета.
Как видно из вышеизложенного, объем действительно намного больше.
Если это удобно для дальнейшего редактирования, вы можете сохранить файл как Illustrator по умолчанию..aiформатировать файл, пока не будет завершен экспорт в SVG. Если вы действительно хотите сохранить как файл SVG, вы можете выбрать при сохраненииPreserve Illustrator Editing Capabilitiesэту опцию, затем используйте при именованииoriginalназвать его, указав, что его нельзя использовать непосредственно в производственной среде.
Давайте рассмотрим другой метод.
Экспортировать как метод
File > Export > Export As...это совсем другой подход. Использование его для экспорта файлов используется для файлов, специально используемых для различных сценариев использования, поэтому сгенерированные файлы не очень удобны для последующего редактирования в Illustrator.
Например, если вы экспортируете файл JPG, не ожидайте, что после экспорта вы сможете редактировать его как вектор.
в то время как экспорт в SVG аналогичен использованиюSave As...метод совсем другой. SVG, экспортированный с использованием метода экспорта, специально используется для Интернета.Экспортируемый файл удаляет все информационные данные, которые не имеют значения для Интернета, такие какdoctype,metadataэти сообщения. И SVG, экспортированный с его помощью, может отличаться от открытия исходного файла при открытии в Illustrator.
Конкретные параметры экспорта следующие:
Ниже приводится конкретное значение этих опций:
1,Styling:Presentation AttributesЗначение выражения использует методы, поставляемые с SVG, такие какfill: redдля представления информации о стиле пользовательского интерфейса SVG; иInline StylesЭто означает использование встроенных стилей для определения информации о стиле пользовательского интерфейса SVG, напримерstyle="fill: red;". использоватьPresentation AttributesМожет быть легко переопределен с помощью CSS. а такжеInline StylesЗатем вы можете более гибко использовать CSS для определения информации о стиле пользовательского интерфейса SVG. Вы также можете экспортировать информацию о стиле вstyleвнутри этикетки.
2. Шрифт: выберитеSVGВы можете экспортировать текст непосредственно в текст или выбратьConvert to OutlinesПреобразование текста непосредственно в векторную графику для использования. Конечно, экспорт должен обеспечивать отсутствие проблемы деформации, а экспорт векторной графики также будет иметь проблемы с доступностью.
3. Изображения:LinkУказывает, что если в SVG используется растровое изображение, будет использоваться ссылка для импорта растрового изображения вместо использованияEmbedметод обработки растровых изображений.
4. Идентификаторы объекта:UniqueУказывает, что каждый экспортируемый идентификатор отличается, что необходимо для использования в Интернете. Конечно, вы также можете выбратьMinimalдля представления идентификатора именем каждого слоя.
5. Десятичный: представляет значение в экспортированном SVG.viewBoxТочность единицы, обычно выбирайте 2 на ней. Если вы точно не знаете, насколько точно вы хотите сохранить размеры SVG.
6. Минимизировать: Поскольку экспорт предназначен для использования в Интернете, конечно, проверьте его, чтобы оптимизировать SVG.
7. Отзывчивый: отметьте его, чтобы указать, что ширина и высота не установлены, так что, если вы используете его в Интернете, его можно легко адаптировать.Вы можете перейти к этому, который я разместил.снимок экранапосмотри.
SVG, экспортированные с помощью этого метода, можно использовать непосредственно в Интернете. курс использованияSVGOПодождите, пока инструмент оптимизации SVG снова его оптимизирует.
Метод экспорта для экранов
В последней версии CC 2017 Illustrator предлагает еще один вариантFile > Export > Export for Screens...Этот метод предназначен для экспорта для использования в различных цифровых устройствах. На самом деле эта функция, кажется, пересекается с описанным выше методом экспорта для использования в Интернете.Export for ScreensПредусмотрена возможность экспорта для iOS и Android.
выберитеExport for Screensметод, он предоставит нам диалоговое окно для выбора различных устройств, чтобы экспортировать формат, подходящий для разных устройств.
Этот метод может экспортировать не только SVG, но и форматы, используемые разными устройствами одновременно. Например, мы разработали набор иконок в одном файле холста, используяExport for ScreensSVG может быть экспортирован одноразовым и может также получить графику в формат PNG, используемым в разных устройствах разрешения, что очень удобно. Конечно, из-за единого использованияExportЭкспортировать, чтобы графика тоже оптимизировалась при экспорте.
вы также можете использоватьAsset Exportпанель, чтобы перетащить графику, которую вы хотите экспортировать отдельно, на панель для индивидуального экспорта.
Скопируйте и вставьте код SVG прямо с монтажной области.
Если вы хотите отдельно экспортировать SVG-код определенной графики на холсте, есть более простой способ:Edit > Copy.
После копирования в Illustrator вы можете вставить код SVG в любое место.
Конечно, за использованием кода, полученного из метода копирования, следует использованиеSave As...Код, полученный методом, аналогичен и не оптимизирован. Если вы хотите использовать его непосредственно в Интернете, вам все равно нужно очистить и оптимизировать код.
Получил SVG, а затем...
Получите SVG, следующим шагом будет его использование, например, если вы хотите использовать SVG для созданияiconПодождите, кроме значков, какие еще сценарии приложений есть для SVG?
может видетьэтостатья.
Эта статья в основном изThe Different Ways of Getting SVG Out of Adobe IllustratorВ этой статье разобрали, есть пропуски, пропуски или непонятные места, дайте пожалуйста еще совет!