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


128

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

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

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

введите описание изображения здесь

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

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

введите описание изображения здесь

Как вариант, как браузер поддерживает опцию «встраивание»?

введите описание изображения здесь

Спасибо!

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

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

введите описание изображения здесь


4
И вопрос, и ответ на этот счет действительно хороши - поддержка как Баумру, так и Duopixel.
Эндрю

1
Очень полезное руководство: creativedroplets.com/export-svg-for-the-web-with-illustrator-cc
Чак Ле Батт

Ответы:


215

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.


Спасибо! Какой подробный ответ! Я предполагаю, что SVG Tiny имеет меньший размер файла? И когда вы сказали: «Только несколько устройств поддерживают SVG Tiny, а не полную спецификацию» , вы имели в виду, что не многие устройства поддерживают SVG Tiny? Я догадываюсь, о чем я на самом деле спрашиваю, каковы самые важные различия? (Не читая этого монстра W3 .) Еще раз спасибо! Обновление: я добавил дополнительную часть о десятичных разрядах к исходному вопросу, если вам интересно. Я открыл SVG в текстовом редакторе - что-нибудь почитать, чтобы узнать, какой XML извлечь?
Baumr 05

3
SVG Tiny не уменьшает размер файла, это просто подмножество SVG, подходящее для устройств с низкой вычислительной мощностью. Он откажется от градиентов, непрозрачности, встроенных шрифтов и фильтров. Я не знаю наверняка, каждый ли браузер, поддерживающий SVG, также поддерживает SVG Tiny, но я предполагаю, что это правда. Я бы порекомендовал вам просто забыть о SVG Tiny, так как вы получите покрытие только для старых телефонов BlackBerry. Я также обновил ответ, чтобы охватить ваш вопрос о десятичных разрядах.
methodofaction 05

Еще раз спасибо. Не говорите такие вещи, как «вы получите покрытие только для старых телефонов BlackBerry» - мне хочется разобраться в этом, независимо от того, насколько они устарели: P
Baumr

4
какие-нибудь предложения по разделу "дополнительные параметры"?
RZKY 01

1
@Duopixel, не могли бы вы обновить свой ответ, добавив «Дополнительные параметры»? Свойства CSS, десятичные разряды (уже в ответе), кодирование, оптимизация для Adobe SVG Viewer, включение данных нарезки, включение XMP, вывод меньшего количества элементов <tspan> и, наконец, использование элемента <textPath> для текста на пути.
PussInBoots,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.