1. Особенности дизайна
2. Кэширование браузера
3. Сжатие GZip
4. интерактивность
5. Поисковая индексация
6. Оптимизированный рабочий процесс
7. 1. Использование тега <img>
8. Потерять шрифты
9. 2. Использование тега <object>
10. Двойная загрузка
11. 3. Использование встроенного SVG в HTML5
12. 4. Использование тега <embed>
13. 6. Использование CSS фонового изображения
14. сравнение
15. Заключение

25 мая 2018 г. · SVG · Web

Возможно, вы уже сталкивались с различными способами встраивания SVG в HTML, но с последними обновлениями браузера и технологий нам все еще нужен тег <object> или вместо него можно использовать <img>? Каковы их плюсы и минусы и как они сравниваются?

Используйте тег <img> и вставляйте шрифты, используя Nano ,

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

Особенности дизайна

Наличие атрибутов Alt и title

Когда мы встраиваем изображение в HTML, всегда полезно иметь атрибуты alt и title для лучшей доступности. Атрибут alt позволяет пользователю просматривать описание изображения, даже если оно не отображается на устройстве, в дополнение к предоставлению контекста для поисковых систем. Атрибут title позволяет навести курсор на изображение, чтобы получить больше информации. В идеале, каким бы способом вы ни выбрали встраивание SVG, вы должны иметь атрибуты alt и title.

Кэширование браузера

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

Сжатие GZip

В отличие от форматов PNG и JPEG (практически уже сжатых) изображения SVG очень хорошо подходят для сжатия. Согласно Консорциум World Wide Web SVG обеспечивает степень сжатия от 75% до 85% , уменьшая размер файла 16 КБ до 4 КБ , что приводит к значительной экономии полосы пропускания и скорости.

интерактивность

Потому что причины безопасности некоторые методы встраивания SVG блокируют доступ к внешним ресурсам, включая CSS, шрифты и javascript. Особенно, когда у нас есть несколько изображений, в идеале наш метод встраивания должен иметь возможность ссылаться на один файл CSS, шрифта или javascript (для экономии ресурсов) и иметь возможность манипулировать нашим встроенным SVG.

Поисковая индексация

Google имеет публично заявлено что он будет индексировать и сканировать файлы SVG. Следовательно, для лучшей SEO (поисковой оптимизации) имеет смысл, чтобы применяемый нами метод встраивания позволял бы поисковым системам размещать наши изображения при поиске изображений.

Оптимизированный рабочий процесс

Выбранный нами метод встраивания должен привести к простому и оптимизированному рабочему процессу, который не требует дополнительной работы по поддержке сложных CSS и методов встраивания.

1. Использование тега <img>

Лучший и самый простой способ встроить SVG в HTML - это использовать тег <img>. Он имеет синтаксис, аналогичный тому, как мы встраиваем другие форматы изображений, такие как PNG, JPEG и GIF:

<img src = "image.svg" /> Поддержка браузера Тег <img> теперь поддерживается во всех основных браузерах, поддерживающих SVG (IE9 +). Атрибуты Alt и title Оба доступны. Доступно кеширование браузера. GZip сжатие доступно. Интерактивность Нет. Если требуется интерактивность, используйте тег <object>. Поисковая индексация Доступна. Упорядоченный рабочий процесс, как и в других форматах изображений.

Потерять шрифты

Если вы используете тег <img> с веб-шрифтами, шрифты не будут отображаться и будут использовать только системные шрифты.

Это главным образом потому, что изображения с тегами <img> не могут ссылаться на внешние ресурсы, включая CSS, шрифты и скрипты, для причины безопасности ,

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

Исключением является использование vecta.io или же vecta.io/nano создать SVG, который очень мал по размеру, самодостаточен без потери каких-либо шрифтов и уменьшает сложность вашего рабочего процесса. Они не только минимизируют SVG, но и минимизируют шрифты, что приводит к очень маленькому SVG (на 22% меньше, чем у конкурентов), сравнимому с разрешением PNG @ 1X, экономит тонну полосы пропускания и ускоряет загрузку вашего сайта.

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

2. Использование тега <object>

Если вам требуется интерактивность, это ваш лучший вариант:

<object type = "image / svg + xml" data = "image.svg"> </ object> Поддержка браузера Тег <object> поддерживается во всех основных браузерах, поддерживающих SVG (IE9 +). Атрибуты Alt и title Нет. Доступно кеширование браузера. Доступно сжатие GZip. Доступна интерактивность. Индексирование поисковой системы Нет. Обходной путь доступен, но с компромиссами. Рабочий процесс Средний. Требуется дополнительная работа при обращении к внешним файлам CSS и шрифтов.

Технически, теги <object> могут использоваться во многих элементах, включая SVG-файлы, и поэтому не распознаются как элементы изображения, поэтому недоступны при поиске изображений. Обходной путь должен использовать тег <img> как запасной вариант:

<object type = "image / svg + xml" data = "image.svg"> <! - Ваше возвращение сюда -> <img src = "image.svg" /> </ object>

Двойная загрузка

Единственная проблема - двойная загрузка, то есть браузер загружает изображение в тег <object> и другое изображение в тег <img>, даже если требуется только одно из них, а другое скрыто. Если вы кешируете свои изображения и помечаете эти файлы как кешируемые на вашем сервере, по крайней мере, браузер будет загружать эти изображения из кеша, но тем не менее двойную загрузку не остановить.

3. Использование встроенного SVG в HTML5

По сути, вы встраиваете все свои SVG-коды в ваш HTML:

<body> <svg xmlns = "http://www.w3.org/2000/svg"> <text x = "10" y = "50" font-size = "30"> Мой SVG </ text> < / svg> </ body> Поддержка браузеров Поддерживается во всех основных браузерах, поддерживающих SVG (IE9 +). Атрибуты Alt и title Нет. Кэширование браузера Нет. Сжатие GZip Нет. Доступна интерактивность. Индексирование поисковой системы Нет. Рабочий процесс запутан.

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

Знайте, что вы все равно получите FOUC (Вспышка неустановленного контента) скорее всего, ваш встроенный SVG все равно будет ссылаться на внешний шрифт. Для решения FOUC вам потребуются встроенные шрифты, перечисленные в Использование тега <img> ,

Поскольку SVG - это, по сути, DOM, вы можете легко использовать внешние CSS, шрифты и скрипты. Несколько SVG могут быть встроены, что относится к одному файлу CSS или шрифта, тем самым экономя пропускную способность и ресурсы.

Кроме того, вы получаете возможность выделять, выделять и копировать текст в SVG, а также возможность поисковых систем индексировать этот текст (мы считаем, что для SEO следует полагаться на HTML и оставлять SVG отделенным, чтобы мы могли индексировать текст с использованием HTML и индексирование изображений с помощью SVG).

Рабочий процесс намного сложнее, поскольку SVG смешан с HTML, и требует гораздо больше работы по поддержанию зависимостей.

4. Использование тега <embed>

Перечислено здесь для полноты, но НЕ используйте тег <embed>. Он не является частью спецификаций HTML, но широко поддерживается во всех браузерах, в основном используемых для реализации плагинов Flash.

<embed type = "image / svg + xml" src = "image.svg" />

НЕ используйте <iframe>, где вместо этого вы можете использовать тег <object>. Iframes трудно поддерживать, не индексируется поисковыми системами и плохо для SEO (поисковая оптимизация).

<iframe src = "image.svg"> </ iframe>

6. Использование CSS фонового изображения

Это эквивалентно использованию тега <img> и имеет те же преимущества и недостатки.

#id {background-image: url (image.svg); }

сравнение

<img> <object> Встроенная поддержка браузера SVG Хорошо Хорошо Хорошо Alt и атрибут заголовка Да Нет Только заголовок Кэширование браузера Да Да Нет Сжатие GZip Да Да Нет Интерактивность Нет Да Да Очень хорошо Индексирование поисковой системой Да Через запасной вариант Нет Упрощенный рабочий процесс Средне сжатый Скорость загрузки Быстрая Быстрая Медленнее очень быстро

Заключение

Как видно из сравнения, очевидно, что мы рекомендуем тэг <img> для большинства случаев использования. Единственное исключение - если вам нужна интерактивность, когда вам требуются динамические изменения в SVG на основе взаимодействия с пользователем.

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

Мы что-нибудь пропустили? Дайте нам знать в комментариях.

Похожие

Комментарии