Loading SVG into SVGWeb dynamically with JQuery

Question

I am trying to dynamically display some SVG content. This content is stored as a string in my data source. An example string would look like the following:

Answer 1

Found a partial answer here and reproduced below. Note, that this approach forces you to build the root <svg> tags and attributes yourself in javascript instead of just loading the whole svg document that you have in your question's example.

Dynamically creating an SVG Root element is similar for direct embedding into a web page. You don't have to create a SCRIPT tag like you would if you were direct embedding the SVG on page load:

<script type="image/svg+xml">
  <svg>
    ...
  </svg>
</script>

Instead, you follow a process similar to the above:

// create SVG root element
var svg = document.createElementNS(svgns, 'svg'); // don't need to pass in 'true'
svg.setAttribute('width', '300');
svg.setAttribute('height', '300');

// create an example circle and append it to SVG root element
var circle = document.createElementNS(svgns, 'circle');
svg.appendChild(circle);

Must use a callback to know when SVG is appended to page (this is slight divergence from standard). The following are supported ways to do this:

svg.addEventListener('SVGLoad', function() {
  svg = this; // this will correctly refer to your SVG root
  alert('loaded!');
}, false);
// also supported:
svg.onsvgload = function() {
  alert('loaded!');
}

Now append the SVG root to our document

svgweb.appendChild(svg, document.body); // note that we call svgweb.appendChild

Note in the above code that we have to use an event listener to know when the SVG root is finished loading into the page; this is a slight divergence from the standard necessary for SVG Web's magic.

The parent that you attach either your SVG root must already be attached to the real DOM on your page (i.e. it can't be disconnected from the page).

Answer 2

You can use jQuery SVG plugin The official website is down, but poke around for instructions.

The relevant part you are asking is answer in this section, I believe..

load(url, settings) this wrapper Load an external SVG document. Note that the browser may not allow you to load documents from sites other than that of the original page. If no callback is provided and an error arises, the error message is displayed within the SVG container.

url (string) is the location of the SVG document or the actual SVG document inline.

settings (boolean) see addTo below or (function) see onLoad below or (object) additional settings for the load with attributes below:

addTo (boolean, optional) true to add to what's already there, or false (the default) to clear the canvas first changeSize (boolean, optional) true to allow the canvas size to change, or false (the default) to retain the original size onLoad (function, optional) callback after the document has loaded, this function receives the SVG wrapper object and an optional error message as parameters, and within which this is the SVG container division.

svg.load('images/rect01.svg',
    {addTo: true, onLoad: loadDone});
svg.load('<svg ...>...</svg>', loadDone);

also, for kicks, here is some PHP code I used to insert such an SVG in a looping statement, that worked nicely..

if (ICON_FILE_EXT == "svg") {
        print   "\<script\>svg.load(\'".ICON_PATH."/directory.svg\', \{addTo\: true, onLoad\: loadDone\}\)\;\<\/script\>";