How to properly embed SVG via javascript?

Question

JavaScript

There are over a dozen SVGs, very thick SVGs with lots of detail.
All together weigh a couple of megabytes, respectively, their text format looks like a canvas of text.
Creating a sprite from such SVGs is stupid - it's inconvenient to work with the code, the sprite itself weighs too much.
So you need to dynamically load the code, and the site in HTML, CSS and JS - i.e. no php and db go here.
The point is that when checking the data, a popup appears with SVG and a description.
And here I sit thinking - how to most effectively insert SVG using JS?
PS: the xml format is needed, as filters will be applied to them. You won't be able to do this through img or background-image
those. I need something like this: take the code from the .svg (or .html file) and paste it on the page. But I have no idea how it is. Never worked with this.

Answer 1

I'll put in my 5 cents.
now I'm making a mobile version of the site and inserting all svg inline, because you need to interact with them.
only i use jade and put them in with include. Initially I clean the svg from garbage. yes, the output is a canvas, but jade simplifies everything.
Of course, you do as you please)

Answer 2

https://jsfiddle.net/QW01_01/gazqzg3c/
With filters
https://jsfiddle.net/QW01_01/gazqzg3c/1/

Answer 3

Something like this:
$('#necessary-block').load('resources/your.svg');

Answer 4

I can advise the following sequence of actions:
1. First, clean up all unnecessary SVG files using the online utility SVG-Editor by Peter Collingridge
Removes all unnecessary. I have been using for many years. The file becomes many times smaller, the image quality does not suffer.
2. And then you will have to manually assign each icon its own id = " " and a class to the container in which the icon will be wrapped in the HTML file.
3. Next, using the getElementById commands, find the icon and paint it setAttribute("fill","yellowgreen")
4. Specific examples are below in the links
https://jsfiddle.net/Alexandr_T/7e6yka38/
https://jsfiddle.net/Alexandr_T /c7akqwjr/