Оптимальные настройки для экспорта SVGs для интернета из Illustrator?

профили SVG

• SVG 1.0: все современные настольные и мобильные браузеры поддерживают SVG 1.1, поэтому никогда не выбирайте эту опцию.
• SVG 1.1: вы почти всегда хотите этого.
• SVG Tiny / Basic: это подмножество SVG, предназначенное для мобильных устройств. Только несколько устройств поддерживают SVG Tiny, а не полную спецификацию, поэтому перейдите на SVG 1.1.

Примечание: SVG Tiny не уменьшает размер файла, это просто подмножество SVG, которое подходит для устройств с низкой вычислительной мощностью. Он будет отбрасывать градиенты, непрозрачность, встроенные шрифты и фильтры. Эрик Дальстрем говорит: Все полные зрители SVG 1.1 должны иметь возможность отображать все содержимое SVG 1.1 Tiny/Basic (согласно спецификации) и, вероятно, все содержимое SVG 1.2 Tiny, которое производит Illustrator.

шрифты примечание: если у вас нет текста в изображении, этот параметр не работает вопрос.

• Adobe CEF: никогда не используйте эту опцию, если вы собираетесь отображать ее в браузерах. Это способ встраивания шрифтов Adobe в файлы SVG, насколько я знаю, это поддерживается только плагином SVG viewer от Adobe.

• SVG: это встраивает шрифт как SVG, который не поддерживается Firefox, но является хорошим вариантом, если вы собираетесь поддерживать только мобильные устройства (которые обычно запускают webkit).

• создать контуры: вы хотите сделать это большую часть времени, если у вас нет большого количества текста. Если у вас есть большой объем текста, вы хотите встроить шрифт с WOFF, но вам придется сделать это вручную.

поднабор:

• нет: это отменит предыдущую настройку и не будет вставлять какой-либо шрифт, если вам все равно, что шрифт возвращается к какому-то другому шрифту на компьютере пользователя выберите этот.

• только глифы используются: вы будете хотеть этого большую часть времени если вы решите встроить шрифт. Он только вставляет используемые символы, поэтому он не раздувает размер файла.

• [rest of subsetting]: это довольно ясно, вы можете включить весь шрифт или его подмножества. Это полезно только в том случае, если ваш SVG является динамическим и текст может изменяться в зависимости от пользователя вход.

изображения: это имеет значение только в том случае, если вы включаете растровые изображения

• Embed: это обычно то, что вы хотите, он кодирует изображение как uri данных, так что вы просто загружаете один файл вместо файла svg с его сопутствующими растровыми изображениями.

• ссылка: используйте это только если у вас есть несколько файлов svg, которые ссылаются на один растровый файл (поэтому он не загружается каждый раз отображает файл svg).

обратите внимание, что связанные растровые изображения не будут отображаться, если SVG отображается через <img> тег, потому что img не позволяет загружать внешние ресурсы. Кроме того: webkit имеет ошибку, которая не отображает растровые изображения в файлах svg, даже если вы их вставляете. Короче говоря: используйте простой <svg> тег если вы собираетесь вставлять или связывать растровые изображения, не используйте <img>.

Сохранить Редактирования В Illustrator Возможности

Я предпочитаю сохранять файл. ai в качестве исходного изображения и думать о файле SVG как Export for web характеристика. Таким образом, вы сосредоточитесь на уменьшении размера файла и получите чистую копию вашего векторного файла со всеми возможностями редактирования. Так что не выбирайте это.

Десятичных Знаков

по умолчанию 3 это нормальная установка, и вы можете в основном забыть об этом.

однако, если у вас действительно сложная пути с большим количеством точек понижение этого параметра до 1 или даже 0 значительно уменьшит размер файла. Но вы должны быть осторожны, потому что сегменты Безье очень чувствительны к этой настройке, и они могут показаться немного искаженными. Поэтому, если вы опускаете этот параметр, всегда убедитесь, что он выглядит приемлемым в браузере.

кодирование

объяснение кодировки символов является довольно техническим, и это касается только svg-файлов с текстом. наиболее вероятно, кодировка вам нужна UTF-8, не изменяйте это, если вы не знаете, что вы делаете.

оптимизация для Adobe SVG Viewer

Adobe SVG Viewer-это плагин для браузера со времен, когда браузеры не поддерживали SVG изначально. Я не знаю, что он делает, но это не имеет значения, не проверять этот.

включают в себя разделение данных

это добавляет раздувание метаданных в ваш SVG-файл, если вы не планируете при открытии вашего файла SVG позже в Illustrator и поиске ваших слайсов (если они у вас есть), не проверять этот

включить XMP

больше метаданных о файле, вы можете читайте на XMP здесь. не проверять этот

выход меньше <tspan> элементов

это будет выделено серым цветом, если у вас нет текста. SVG не поддерживает таблицы Кернинга, поэтому, некоторые последовательности символов будут казаться слишком разнесенными, т. е. AVA. Иллюстратор работает вокруг, добавляя tspan элементы и настройки позиций символов немного. Это добавляет немного раздувания в файл не проверяйте это, если вы не заботитесь больше о размере файла, чем внешний вид текста.

использовать <textpath> элемент для текста на пути

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

---

в общем, я бы рекомендовал вам заглянуть в SVG в целом, вы обнаружите, что он очень похож на HTML, и он позволяет вам настраивать вещи, которые нельзя сделать в Illustrator.