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

Я ищу логотип SVG для веб-сайта - чтобы он выглядел великолепно на гибком дизайне для всех устройств.

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

В Illustrator существует несколько вариантов экспорта SVG. Во-первых, , какой профиль SVG лучше всего?

Я предполагаю, что SVG Tiny имеет более низкий размер файла? Многие устройства поддерживают SVG Tiny? Каковы наиболее важные различия? (Без чтения этого монстра W3.)

Во-вторых, я полагаю, что лучшим вариантом для размещения изображения является "ссылка"? (См. Описание после восклицательного знака.)

В качестве альтернативы, как поддерживается браузер для опции "embed"?

Спасибо!

P.S. Будет вариант резервного альфа-PNG, но я хочу, чтобы SVG поддерживаться как можно лучше. (Подумайте об этом, резерв вариант - как JPG - вероятно, будет лучшим в этом случае, так как альфа-PNG сам нуждается в решении для более старого IE.)

Обновление: Также можно настроить дополнительные параметры. Я не работаю с текстом, поэтому единственное, что я вижу, это десятичные знаки. Для логотипов что-то отображаемое как максимум 200x200px (так 400x400px на дисплеях Retina), является ли "3" лучшим выбором? Или "2", чтобы свести к минимуму размер файла?

Ответ 1

Профили SVG

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

Примечание. SVG Tiny не уменьшает размер файла, это просто подмножество SVG, достаточное для устройств с низкой мощностью обработки. Он будет отбрасывать градиенты, непрозрачность, встроенные шрифты и фильтры. Erik Dahlström говорит: Все зрители 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.