How to embed SVG inline JavaScript / jQuery?

Question

$.get('path/to/svg.svg', function(data) { $('#my-div').html(data); }); 

As a result, "HIERARCHY_REQUEST_ERR: DOM Exception 3" is displayed in the console. All variations of this concept seem to do the same. If I copy and paste my actual SVG and replace it with “data,” it is pasted just fine. Do I need to format .svg differently or somehow parse it so that the browser does not think that I'm trying to put another document in my document?

Answer 1

Use jQuery SVG: http://keith-wood.name/svg.html

Answer 2

In any case, you can reload the image in the <div> :

$('#my-div').css('background-image', "path/to/svg.svg");

Answer 3

try looking at the children of the returned data. In my case, the first child was an XML node, the second was a DOCTYPE declaration, then the third child was an SVG tag, which can be added via the .html () method. However, the SVG image is not yet displayed, unless I switch some styles on the container in the developer tools (using chrome). Turn off to do some search queries. If I find anything useful, I will add it to the comments of this post.