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

This results in "HIERARCHY_REQUEST_ERR: DOM Exception 3" in the console. All variations of this concept seem to do the same thing. If I copy-and-paste my actual SVG and replace "data" with it, it's inserted just fine. Do I need to format the .svg differently or somehow parse it first so that the browser doesn't think I'm trying to put another document inside my document?

Charlie Schliesser
  • 7,851
  • 4
  • 46
  • 76

3 Answers3

0

By any event you can reload image into <div>:

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

Ruben Kazumov
  • 3,803
  • 2
  • 26
  • 39
  • Well, setting it as a background image and inserting the SVG XML into a document are very different things. – Charlie Schliesser Feb 20 '13 at 17:15
  • You are totally right! But how we can see, the SVG document in your case was prepared in by EXTERNAL file of script source/process by the address path/to/svg.svg. It means, we spent 2ms to send GET URL and 2ms to receive the content. The same situation with CSS: we are setting new URL, sending GET (low level) and receiving the content. – Ruben Kazumov Feb 20 '13 at 18:07
  • If you want to CONSTRUCT svg in local code (javascript) with no sending-receiving procedures, you can try my jQuery hack: http://stackoverflow.com/questions/11792754/create-and-access-svg-tag-with-jquery/14985470#14985470 – Ruben Kazumov Feb 20 '13 at 18:09
0

try looking through the child elements of the returned data. In my case the first child was the XML node, second was the DOCTYPE declaration then the third child was the SVG tag which can be added through the .html() method. However the SVG image is still not displaying unless I toggle some styles on the container in developer tools (using chrome). Off to do some googling. If I find anything useful I will add it to the comments of this post.

steve
  • 130
  • 1
  • 4
  • I had a 0 height SVG element! However this method seems to have problems loading LinearGradient svg tags and using them properly (they are added to the DOM correctly but they are not picked up when referenced by a fill attribute). Once again I'm off to do some googling and will post back any more findings – steve May 21 '13 at 15:46
0

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

Sunjay Varma
  • 5,007
  • 6
  • 34
  • 51