Лучший способ встроить SVG в HTML (2019)

  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> с веб-шрифтами, шрифты не будут отображаться и будут использовать только системные шрифты

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

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

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

Они не только минимизируют 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-файл отображается почти сразу, его можно использовать для отображения изображений или графики во время ожидания загрузки приложения.

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

Похожие

Поисковая оптимизация
Почему поисковая оптимизация? С более чем 4 миллионами запросов в минуту, Google сегодня является крупнейшим и самым важным маркетинговым каналом в мире. Подавляющее большинство из этих 4 миллионов поисковых запросов каждую минуту состоят из людей, которые ищут товары или услуги. Например, когда поисковый запрос:
Поисковая оптимизация Max ™
SEO-Max - это современное состояние служба поисковой оптимизации обеспечивает непревзойденную производительность - для мощного присутствия в сети и долгосрочных, измеримых результатов.
Поисковая оптимизация Гетеборг
Поисковая оптимизация может помочь любому с вами - в Гетеборге есть много хороших SEO компаний. Вы можете запросить и сравнить цитаты и, возможно, найти хорошее и доступное предложение, которое поможет вам повысить рейтинг по некоторым из ваших ключевых слов. Однако, если
12 лучших плагинов AMP для Wordpress
AMP, или плагины Accelerated Mobile Page для WordPress, предназначены для обеспечения беспрепятственного использования веб-сайта с любого мобильного устройства просмотра. Разработчикам веб-сайта WordPress поручено интегрировать плагины WP-контента и ресурсы кодирования в свой внутренний код, чтобы зрители могли в полной мере использовать возможности веб-сайта при использовании мобильного устройства просмотра. За
SEO Лас-Пальмас: поисковая оптимизация
... lt=""> Мы разработали 3 плана в рамках SEO Лас-Пальмас, очень разные в соответствии с потребностями клиента, мы детализируем их: · Локальный базовый план: этот план предназначен для малых и средних предприятий, имеющих базовый веб-сайт. Это означает, что у вас есть список услуг, и вы хотите разместить на местном языке на вашем родном языке. · План электронной торговли:
Ванкувер SEO - поисковая оптимизация
Какой смысл иметь сайт, если никто не может его найти? Collabo поможет расширить ваш бизнес в Интернете, так как ваш сайт будет первым в результатах поиска. Разместите ваш сайт на первой странице Google, Yahoo! и Bing для ключевых слов, которые приносят большие объемы трафика. Поисковая оптимизация
Загрузка программного обеспечения Ранга
Главный / Библиотеки и демоверсии / Построитель рангов Название: Программное обеспечение для построения рангов Размер файла: 839 МБ Язык: Английский Рейтинг: 3/10 Скачать 20 июня - 14 минут - Загружено от homebusinesshowto Попробуйте
HTML Sitemaps и SEO
Использование файлов Sitemap HTML для SEO является мощной альтернативой использованию якорных текстовых ссылок в основной навигации для обеспечения сканирования более глубоких страниц. HTML-карты сайтов создают значительный и особый тип остаточного фактора ранжирования, который сканируется всеми поисковыми системами, которые XML-карты сайтов просто не могут реплицировать.
SEO Цюрих
Оптимизация вне страницы - противоположность оптимизации страницы. То, что работает над оптимизацией на странице исключительно на вашем веб-сайте, находится в разделе «Оптимизация на странице» z. Например, создавайте целевые страницы, которые в конечном итоге повысят терминологию вашего сайта. Оффстраничные записи сделаны вручную, чтобы на сто процентов не было дублированного контента в Интернете, который имеет какое-либо отношение к вашему сайту. Это был бы смертельный звон для твоего успеха.
Сравнение курсов SEO оптимизации
... lt=""> По опыту могу сказать, что результат вполне правильный. Я лично общаюсь с г-ном Рожничком из проекта SEOškola.cz и с Яном Линхартом, который стоит за SEOlinhart.cz и рядом других проектов. У них обоих очень профессиональное отношение, и с ними разговаривают на человеческом уровне. Вы также можете прочитать интервью "Ян Линхарт - Успех не приходит в
SEO - SEO и шаблон цифрового маркетингового агентства HTML5
Это Seo Company - HTML-шаблон, созданный для SEO-компаний, специалистов по цифровому маркетингу и социальных сетей. Поставляется в комплекте с кучей УНИКАЛЬНЫХ и полезных функций. Попробуйте! 50+ Шаблон HTML5 сайта - это мощный, отзывчивый и сырой многоцелевой многостраничный и одностраничный шаблон HTML5. Создайте все, что вам нравится с этим шаблоном. Будь то деловая, корпоративная, медицинская, туристическая, строительная, недвижимость, медиа-агентство, портфолио, агентство, журнал,

Комментарии

? &lt;<<ѓ <<<<<<<<<ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ?
... тега Метатеги содержат важную и полезную информацию, которую сканеры предпочитают ранжированию. Вот почему для поисковой оптимизации важно, чтобы на веб-сайтах была мета-информация, которая правильно заполнена и содержала полезную информацию, которая должна иметь отношение к этой странице. Хотя эти метаэлементы не видны посетителю, некоторые из них появятся в списке результатов поиска во время поиска Google. С помощью инструмента создания мета-тегов вы можете легко создавать мета-теги
Gt; "Title =" <?
gt; "Title =" <? Php echo esc_attr (get_bloginfo ('name', 'display')); ?&gt; "Rel =" home "> <h1 class = "site-title"> <? php bloginfo ('name'); ?&gt; </ h1> <h2 class = "site-description"> <? php bloginfo ('description'); ?> </ h2> </a> [/ code] Изменить с помощью кода, как это. затем сохраните. код: [code lang
А как насчет перехвата браузера, минимизации HTML и CSS или чего-либо еще в этом списке?
А как насчет перехвата браузера, минимизации HTML и CSS или чего-либо еще в этом списке? Если нет, вы не сможете улучшить скорость загрузки вашего сайта без посторонней помощи. Google предоставляет вам действенный список немедленных исправлений, которые улучшат время загрузки вашего сайта, удобство работы и рейтинг. Все, что вам нужно для реализации этих чрезвычайно полезных предложений, это беглое знание серверной части вашего сайта. Дублированный контент В
Gt;>> Ищете лучшие женские седла?
gt;>> Ищете лучшие женские седла? У нас есть сообщение для этого здесь «Идеальный окунь» резко варьируется от одного велосипедиста к другому - и определяется рядом факторов: анатомическими различиями, стилем катания, дисциплиной и всем, что между ними. >>> Как установить высоту седла Огромный разброс в том, что нужно гонщикам, означает,
Для кого вы на самом деле поисковая оптимизация, только поисковая система?
Для кого вы на самом деле поисковая оптимизация, только поисковая система? В конце концов, Google является самой важной поисковой системой в Германии, а другие, такие как Bing, играют подчиненную роль. Но в конечном итоге мы ставим пользователя в центр внимания, потому что то, что нравится пользователю, это также радует Google. Обзор тем: Определение поисковой оптимизации Разница
Lt;h2> Готовы проверить время загрузки вашего сайта?
lt;h2> Готовы проверить время загрузки вашего сайта? </ h2> Ссылка на инструменты, которые можно использовать для проверки времени загрузки. Бросьте вызов людям, чтобы их время загрузки было менее 3 секунд. Единственный заголовок 1 на странице - это заголовок моего сообщения. Все после этого - заголовок 2 или больше. Каждый раз, когда я хочу развить заголовок 2 с большим количеством подразделов, я увеличиваю заголовок
Поисковая система - ваш лучший продавец?
Поисковая система - ваш лучший продавец? Абсолютное большинство пользователей Интернета используют одну или несколько поисковых систем для поиска поставщиков товаров или услуг. Поскольку вы часто получаете сотни результатов, важно, чтобы ваш сайт был виден на первых страницах результатов, на которые смотрят клиенты! Только около 10% переходят на следующую страницу результатов и т. Д. Настройте свою страницу для людей и пауков! Ваш веб-сайт или интернет-магазин
Какова основная идея драмы <Hello Monster>?
Какова основная идея драмы <Hello Monster>? Продюсер №: драма рассказывает о «критическом моменте». У каждого из нас есть такие моменты, как когда мы встречаем кого-то, кого любим и обмениваемся верой. То, что мы переживаем в решающий момент, дает нам советы для выбора правильного направления жизни. Я старался изобразить эти истории как можно легче и легче. В. Криминальный драматический сериал - незнакомый жанр для фанатов корейской драмы. Как вы собираетесь
ВНУТРЕННЯЯ, ТЕРРИТОРИЯ, ОБРАТНАЯ, РЕГИОНАЛЬНАЯ, РОССИЙСКАЯ, РОССИЙСКАЯ, РОССИЙСКАЯ, РОССИЯ · РґРμР »С <С <Р ° Р№С, Р °?
ВНУТРЕННЯЯ, ТЕРРИТОРИЯ, ОБРАТНАЯ, РЕГИОНАЛЬНАЯ, РОССИЙСКАЯ, РОССИЙСКАЯ, РОССИЙСКАЯ, РОССИЯ · РґРμР »С <С <Р ° Р№С, Р °? Как это сделать ... SEO-оптимизация сайта, ° С 2. UpTime Red С ,РєРѕСЂРѕСЃС, СЊР ·Р °СіСЂРѓРёРёРёРЃС№С, Р ° , 3. РСЃРєР »СЋС ‡ РμРЅРЅС <РμСЃС, СЂР ° РЅРёС † С < . Причал, Россия, Россия, Москва, Россия, Германия,
Какой лучший способ использовать ключевые слова, которые люди больше всего ищут?
Какой лучший способ использовать ключевые слова, которые люди больше всего ищут? Я приведу вам пример: если завтра (не дай Бог) случится землетрясение в Мадриде, тысячи людей будут искать информацию о «землетрясении в Мадриде», поэтому это слово станет тенденцией. Не пора ли написать об этом в своем блоге? Вы уже создали мимолетную контент-стратегию. С другой стороны, если вы проводите исследование ключевых слов для своего веб-сайта или вам нужно обновить то, что у вас есть, этот
И именно в этот момент начался бум создания веб-страниц и желание монетизировать эту работу, и каков был лучший способ привлечь людей, чтобы продавать больше?
И именно в этот момент начался бум создания веб-страниц и желание монетизировать эту работу, и каков был лучший способ привлечь людей, чтобы продавать больше? Ну да, вы правильно догадались, поисковые системы и чтобы быть успешными в них, должны были появиться на верхних позициях, это когда SEO родился. Что такое SEO? Поисковая оптимизация или SEO (для аббревиатуры от английского, поисковая оптимизация ) - это технический процесс, посредством

Каковы их плюсы и минусы и как они сравниваются?
Мы что-нибудь пропустили?
Lt;<<ѓ <<<<<<<<<ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ ѓ?
Gt; "Title =" <?
Php echo esc_attr (get_bloginfo ('name', 'display')); ?
Gt; "Rel =" home "> <h1 class = "site-title"> <?
Php bloginfo ('name'); ?
Gt; </ h1> <h2 class = "site-description"> <?
Php bloginfo ('description'); ?
А как насчет перехвата браузера, минимизации HTML и CSS или чего-либо еще в этом списке?
Последние новости:
10 лучших игр и игрушек для детей 2-5 лет в самолете или поезде – чем занять ребенка в дороге?

Малыш уже достиг возраста 2 месяцев, а ведь так недавно он был совсем еще беспомощным. Теперь вы замечаете,

Еще совсем недавно появившись на свет, ребеночек трех месяцев стремительно растет и развивается. Родители

                                     В этот период развитию ребенка будет способствовать

Малыш 4-7 месяцев от роду обычно уже активно стремится сидеть, либо уже сидит. Пусть даже просто на коленях

Проводя раскопки в местах древнейших поселений людей, археологи часто находят детские игрушки: погремушки,

  Хотя малыш еще совсем недавно появился на свет, игрушки для месячного ребенка нужны, ведь развитием

25 лучших развивающих игр для новорожденных – развивающие занятия с рождения до полугода Большое заблуждение

» Ребенку 6 месяцев Какие игрушки нужны детям в 6 месяцев Погремушки, мячики, резиновые

Дети в этом возрасте все активнее познают окружающий мир, все больше вещей они умеют делать самостоятельно