Как лучше добавлять SVG файлы в HTML?

Question

Раньше я всегда добавлял их через <img>, но недавно увидел, что многие делают иначе, <svg><path> и тд. Вопрос, как получить значение svg? И какие в таком способе плюсы, по сравнению с обычный <img>?

Answer 1

Раньше я всегда добавлял их через <img>, но недавно увидел, что многие делают иначе,

Конечно, если вам нужно использовать SVG только, как картинку, то можно и так добавлять.
Но, при таком способе вы будете лишены всеx возможностей SVG: стилизация, адаптивность, интерактивность

<img src="https://svg-art.ru/files/menubutton.svg" />

Другие способы подобные <img>

1. background-image

 .container {
  width:500px;
  height:500px;
 background-image:url(https://image.flaticon.com/icons/svg/32/32441.svg);
   }

<div class="container"></div>

2. content: url()

.container {
  width:300px;
  height:300px;
 content: url(https://image.flaticon.com/icons/svg/32/32443.svg);
   }

<div class="container"></div>

Note

Если вы хотите использовать все возможности SVG, то самым простым способом добавить svg в HTML является непосредственное копирование кода SVG в HTML.

Так называемый инлайн способ

.container {
width:10%;
height:10%;
} 

 svg:hover > line {
stroke:dodgerblue;
}

<div class="container">
 <svg viewBox="0 0 60 80"  xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="20" y1="30" x2="50" y2="30" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="40" x2="50" y2="40" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="50" x2="50" y2="50" stroke="black" stroke-width="5" stroke-linecap="round"/>
</svg>
</div>

Object

Самый распространенный способ добавления SVG файлов в HTML При таком способе, как и при инлайн способе становятся возможными: адаптивность, стилизация, интерактивность

<object id="hud" type="image/svg+xml" data="https://svg-art.ru/files/images/hud1.svg"></object>

Object vs img

Один и тот же файл добавлен различными способами. Наведите курсор и поймёте почему добавление SVG с помощью <object> намного лучше.

.img1, .obj1 {
font-size:18px;
}

<p class="img1">  Add &lt;img&gt; </p> 
<img src="https://svg-art.ru/files/t1.svg" width="50px" height="50px" alt="image description"> 
<p class="obj1">  Add &lt;object&gt; </p> 
<object type="image/svg+xml" data="https://svg-art.ru/files/t1.svg" width="50px" height="50px" > </object>

БЛОГ НА HUSL

Как лучше добавлять SVG файлы в HTML?

Ответы (1 шт):

Note

Object

Object vs img