Как вставлять svg?

Question

[Breeze1]

Как вы добавляете svg на сайт ? Чтобы была потом возможность редактировать, цвет, размер и так далее.

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

Какие ещё есть интересные варианты ?

Comments

[Jacket]

Через background и base64

[Breeze1]

Jacket, а как ты будешь менять цвет заливки иконки например, если вставишь её через background ?

[jeruthadam]

Jacket, херовая идея https://css-tricks.com/probably-dont-base64-svg/

Answer 1

[Владимир]

SVG-спрайт + <use />.

Answer 2

[wisgest]

<object id="svg1" type="image/svg+xml" data="/path/file.svg"></object>

<script>
var SVGDocument = document.getElementById("svg1").contentDocument;
var SVGSVGElement = SVGDocument.documentElement;
SVGSVGElement.style.backgroundColor = "red";
</script>