Статьи

Как добавить масштабируемую векторную графику (SVG) на вашу веб-страницу

Октябрь 3, 2018

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

В какой-то момент вы захотите встроить свой тщательно созданный SVG прямо в веб-страницу. Существует не менее шести способов достижения этой цели, но не все методы созданы одинаково.

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

Если вы намереваетесь использовать какие-либо расширенные функции SVG, такие как CSS и сценарии, HTML5- <object> 

 <object type="image/svg+xml" data="image.svg">
  Your browser does not support SVG
</object>

Обратите внимание, что вы можете предоставить запасной текст или изображения в блоке object

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

Я включаю <embed> Хотя он похож на <object><embed> Однако он поддерживается большинством браузеров и часто используется для реализации плагинов Flash.

Вот код Это работает, но не используйте его!… 

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

3. Внутри <iframe>

Поскольку браузеры могут отображать SVG-документы по своему усмотрению, можно загружать изображения в iframe 

 <iframe src="image.svg">
  Your browser does not support iframes
</iframe>

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

Лично я предпочитаю избегать iframes

4. Встроенный SVG XML, встроенный в вашу страницу HTML5

Изображение SVG может быть добавлено в виде островка кода непосредственно на страницу HTML5 с помощью внешних тегов <svg> 

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Embedded SVG</title>
</head>
<body>
  <h1>Embedded SVG</h1>

  <!-- SVG code -->
  <svg width="300px" height="300px" 
    xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="50" font-size="30">My SVG</text>
  </svg>

</body>
</html>

Этот метод работает во всех браузерах HTML5, а также разрешает анимацию, создание сценариев и CSS. Но вы должны использовать это? Метод кажется мне немного грязным. Возможно, это вариант для простых изображений или если вы создаете изображение с помощью JavaScript, но я рекомендую хранить ваши файлы отдельно, когда это возможно.

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

SVG могут быть добавлены на вашу веб-страницу, как любое другое изображение: 

 <img src="image.svg" />

Обычная ширина, высота, alt и другие атрибуты могут быть добавлены, если они потребуются

Вы, наверное, удивляетесь, почему img По соображениям безопасности браузеры отключают SVG-скрипты, ссылки и другие виды интерактивности, когда они добавляются на вашу страницу с тегом img Кроме того, IE9, Chrome и Safari не будут применять правила таблиц стилей к SVG, если они определены в отдельном файле CSS.

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

SVG можно использовать в качестве фона CSS для любого элемента: 

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

Как и теги <img>

Что вы должны использовать?

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

Для изображений без взаимодействия можно использовать тег <img>

Встроенные SVG или iframes, возможно, являются опциями для некоторых проектов, но лучше избегать <embed>

Скоро: другие статьи о SVG, включая CSS и скрипты …

Комментарии к этой статье закрыты. У вас есть вопрос о HTML5? Почему бы не спросить об этом на наших форумах ?

36
Share: