Convert link to a SVG into an inline SVG element

Question

Is it possible to convert a link to an external SVG such as http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg to an element?

My first approach was to grab the source code of the svg page, but this is not possible for external sources in Javascript.

Does [this](http://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files) help you at all? — , Mar 24 '14 at 18:15
Thank you John, but I don't think that this helps. I need the svg INLINE to modify color/stroke etc of the file, as well as modifying the path element of the SVG itself. — daumann, Mar 24 '14 at 18:19
possible duplicate of [How to change color of SVG image using CSS (jQuery SVG image replacement)](http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement) — Paul LeBeau, Mar 24 '14 at 18:46

score 8 · Accepted Answer · answered Mar 25 '14 at 02:07

This cleanest way to load an svg file inline, is to create a DIV on your web page and load the svg file via XMLHttpRequest and place the response text into the DIV using innerHTML

You can then inspect/change the file as needed.

Below is an example the calls your file into the web page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load SVG file file Inline</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:0px;font-family:arial'>
<center><h4>Load SVG file Inline</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Load an svg file as inline SVG. This provides dynamic svg applications seamless DOM access to its elements. Uses <b>XMLHttpRequest</b>. It can be loaded as a DIV's <b>innerHTML</b> via a string dump (<b>responseText</b>).
</div>
<div id="svgDiv"></div>
<p><button onClick=changeSomeValues()>change</button></p>
SVG DOM:<br />
<textarea id=mySvgValue style='width:90%;height:200px;font-size:120%;font-family:lucida console;'></textarea>
  <br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<div id='browserDiv' style='padding:3px;position:absolute;top:5px;left:5px;background-color:gainsboro;'></div>

<script id=myScript>
function loadSVGasXML()
{
    var SVGFile="http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg"
    var loadXML = new XMLHttpRequest;
    function handler(){
        if(loadXML.readyState == 4 &&loadXML.status == 200){
               svgDiv.innerHTML=loadXML.responseText
               mySvgValue.value= svgDiv.innerHTML
        }
    }
    if (loadXML != null){
        loadXML.open("GET", SVGFile, true);
        loadXML.onreadystatechange = handler;
        loadXML.send();
    }
}
//--button---
function changeSomeValues()
{
    path4653.style.fill="green"
    mySvgValue.value=svgDiv.innerHTML
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
    loadSVGasXML()
    jsValue.value=myScript.text
    mySvgValue.value=svgDiv.innerHTML
}
</script>
</body>
</html>

This is some FIRE BOSS code! I wish I had the words to express how much time you have saved me with this code in replacing icons in an app that I inherited. I wish I could give you more than just an 'uptick'. Thank you so much! — Rani Radcliff, Mar 12 '21 at 22:32

Convert link to a SVG into an inline SVG element

1 Answers1

Linked