How to embed SVG using javascript?

There are more than a dozen SVG, SVG is very thick with lots of details.
All together weigh a few megabytes, according to their text format looks like the canvas from the text.

Create a sprite from the SVG such stupid to work with the code awkward, the sprite itself weighs too much.
So it is necessary to dynamically load code, and the site on HTML, CSS and JS - i.e. no php and DB do not go here.

The point is that data validation popup appears with SVG and description.
And here I sit thinking of as efficiently as possible to insert an SVG using JS?

PS: need is a xml format which this filter applies. Via img or background-image to rotate will not work

i.e. I need something like this: take the code from .svg (or .html file) and paste it on the page. But do not imagine like this. Not worked with that never.
July 2nd 19 at 17:55
4 answers
July 2nd 19 at 17:57
I'll put my 5 cents.
now make a mobile version of your website insert an inline svg because you need to interact with them.
I use only jade and insert them using include. initially svg cisu of debris. Yes, the output is the canvas, but jade makes everything simple.
of course, you do as you wish)
still, damn do not want megabytes just to load - Durward_Osinski commented on July 2nd 19 at 18:00
: well if you really severe, it is best to load
I have a lot of them, but they all weigh a little, a maximum of 2KB one svg - Fannie_Mohr commented on July 2nd 19 at 18:03
July 2nd 19 at 17:59
July 2nd 19 at 18:01
Something like this:
$('#necessary-block').load('resources/your.svg');
July 2nd 19 at 18:03
I can advise the following sequence of actions:
1. First cleaned from SVG files using online utilities SVG-Editor author Peter Collingridge
Removes all unnecessary. Use for many years. The file becomes significantly smaller, the image quality does not suffer.
2. And then you have to assign each icon id=" " and class to the container which will be wrapped icon in HTML file.
3.Then via getElementById to find the icon and put her setAttribute("fill","yellowgreen")
4. Specific examples below in the links
https://jsfiddle.net/Alexandr_T/7e6yka38/
https://jsfiddle.net/Alexandr_T/c7akqwjr/

Find more questions by tags JavaScriptFrontend