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, насколько мне известно, он поддерживается только плагином Adobe для просмотра SVG.
SVG: это встраивает шрифт как SVG, который не поддерживается Firefox, но является хорошим вариантом, если вы намереваетесь поддерживать только мобильные устройства (которые обычно запускают webkit).
Создайте контуры: вам нужно будет делать это большую часть времени , если у вас нет большого количества текста. Если у вас большой объем текста, вы захотите встроить шрифт с помощью WOFF, но вам придется сделать это вручную.
Подмножество :
Нет: это отменит предыдущую настройку и не будет встраивать какой-либо шрифт, если вам все равно, что шрифт возвращается к другому шрифту на компьютере пользователя, выберите это.
Используются только глифы: вы захотите использовать это в большинстве случаев, если решите встроить шрифт. Он включает только используемые символы, поэтому не увеличивает размер вашего файла.
[остальная часть подмножества]: это довольно ясно, вы можете включить весь шрифт или его подмножества. Это полезно, только если ваш SVG динамический и текст может изменяться в зависимости от ввода пользователя.
Изображения : это имеет значение, только если вы включаете растровые изображения.
Встроить: обычно это то, что вы хотите , он кодирует изображение как 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
. Illustrator работает, добавляя tspan
элементы и немного изменяя положение персонажей. Это добавляет немного раздувания к файлу , не проверяйте это, если вас больше не заботит размер файла, а не внешний вид текста .
Использовать <textpath>
элемент для текста на пути
Он будет неактивен, если на пути нет текста. Браузеры, как правило, сильно различаются, когда дело доходит до размещения текста на пути, поэтому Illustrator пытается помочь, применяя поворот и положение к персонажу вместо того, чтобы оставлять задание браузеру. не проверяйте это, если вас больше не заботит размер файла, а не внешний вид текста .
В общем, я бы порекомендовал вам изучить SVG в целом, вы обнаружите, что он очень похож на HTML и позволяет настраивать вещи, которые нельзя сделать в Illustrator.