How to extract SVG element from external SVG file and append to HTML?

Question

This question is similar, but the answer does not help.

The goal is to load an external SVG file (e.g., https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg), extract the SVG element, and append it to the HTML as an inline SVG element.

How can you do this?

We only want to use jQuery, no other third-party libraries.

score 2 · Accepted Answer · answered Mar 06 '19 at 09:25

If you have an svg element like this

<svg id="mySvgElement" width="100" height="100"></svg>

then, you can get an external svg file and put its content into your svg element like this:

$.get(externalSvgUrl, function(response){
    var content = $(response).html();
    $("#mySvgElement").html(content);
});

1 Answers1