SVG and javascript

My plan was to dynamical load vector-graphics and combine them to an image just like you can stack multiple images in css-background.
With the svg-<use> command it should be possible to combine the separatly loaded svg into one scene.

But I run into several problems here:

• svg can be loaded via <img> but then you cannot access each component of svg for re-styling
• you can either inline-embed an SVG in html or use <object> to load dynamical from a path
• first one is ugly to edit (copy paste from svg-file)
• I CANNOT access contentDocument (opposed to the many examples out there) from the loaded svg inside <object> because of cross-origin-blocking for local files !
• both are creating a visible image; but I just want to get the svg loaded to be able to <use> them

So my current workaround is like this:

• create a js-function that builds a svg-html-string for a picture (copy paste svg-code from svg-file into function; remove all line breaks)
• those functions are called in the passage-script to add the svg-html to the ''-container of the scene-svg
• the scene can now <use> those svg-html because it exists in the html-document

Example:
//sample svg-html-generator window.gm.images.wolf2 = function() { return('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="wolf2">.....</svg>'); }; window.gm.printSceneGraphic=function() { var width=600,height=300; var draw = SVG().addTo('#canvas').size(width, height); //initilize SVG, pointing to scene-canvas (just a

) var background = draw.rect(width, height).attr({ fill: '#f06'}); //draw a simple colored background rect var image = draw.defs().image('assets/battlers/slug1.svg'); //this will load the svg as image that cannot be styled! image.node.id='slug1'; //need to add a id for var node = SVG(window.gm.images.wolf2()); //convert the SVG-string into a node if(node) node.addTo(draw.defs()); // and add it to devs draw.use('wolf2').move(-20, 20); //now we can use them draw.use('slug1').move(20, 20); draw.use('wolf2').move(100, 20); };

Todo: how to load a svg-file from disk and append its content to <devs>-container of scene-svg? This is not possible because of cross-origin-blocking?