🤔 Как можно вставить svg в html документ?

Вставить SVG в HTML можно несколькими способами, в зависимости от того, что вам нужно: просто отобразить изображение, стилизовать его через CSS или динамически изменять с помощью JavaScript.

🟠Прямой (inline) SVG-код в HTML
Этот способ позволяет стилизовать и изменять SVG с помощью CSS и JavaScript.




🟠Через тег ``
Если SVG не нужно изменять, можно вставить его как обычное изображение.


🟠Через CSS `background-image`
SVG можно использовать как фоновое изображение.



.icon {
width: 100px;
height: 100px;
background-image: url('image.svg');
background-size: cover;
}


🟠Через тег ``
Позволяет загружать SVG-файлы и взаимодействовать с ними.


🟠Через тег ``
SVG можно загружать в iframe.


Ставь 👍 и забирай 📚 Базу знаний