Как правильно встроить SVG через javascript?

Question

[Денис Букреев]

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

Создавать спрайт из таких SVG глупо - работать с кодом неудобно, сам спрайт весит слишком много.
Значит надо динамически подгружать код, а сайт на HTML, CSS и JS - т.е. никакие php и БД не идут сюда.

Соль в том, что при проверке данных появляется попап с SVG и описанием.
И вот я сижу думаю - как максимально эффективно вставлять SVG с помощью JS?

PS: нужен именно xml формат, так как к ним будут применяться фильтры. Через img или background-image такое провернуть не получится

т.е. мне нужно примерно следующее: брать код из .svg (либо .html файла) и вставлять его на страничку. Но что-то не представляю как это. Не работал с таким никогда.

Answer 1

[Денис Т]

вставлю свои 5 копеек.
сейчас делаю мобильную версию сайта и все svg вставляю инлайново, т.к. нужно с ними взаимодействовать.
только я использую jade и вставляю их с помощью include. изначально svg чищю от мусора. да, на выходе получается полотно, но jade всё упрощает.
вы, конечно, делаете как вам удобно)

Comments

[Денис Букреев]

все равно блин не хочется мегабайты сразу подгружать

[Денис Т]

Денис Букреев: ну если и правда тяжелые, то лучше подгружать
у меня то их много, но они все мало весят, максимум 2кб одна svg

Answer 2

[Александр Таратин]

https://jsfiddle.net/QW01_01/gazqzg3c/
C фильрами
https://jsfiddle.net/QW01_01/gazqzg3c/1/

Answer 3

[Immortal_pony]

Как-то так:
$('#necessary-block').load('resources/your.svg');

Answer 4

[svgartru2016]

Могу посоветовать такую последовательность действий:
1. Сначала очищаете от всего лишнего SVG файлы с помощью онлайн утилиты SVG-Editor автор Peter Collingridge
Убирает всё лишнее. Пользуюсь много лет. Файл становится в разы меньше, качество изображения не страдает.
2. А дальше придется ручками присвоить каждой иконке свой id=" " и класс контейнеру, в который будет обернута иконка в HTML файле.
3.Далее при помощи команд getElementById находите иконку и красите её setAttribute("fill","yellowgreen")
4. Конкретные примеры ниже в ссылках
https://jsfiddle.net/Alexandr_T/7e6yka38/
https://jsfiddle.net/Alexandr_T/c7akqwjr/