Multiple SVG document loaded dynamically in an HTML page

Question

I dynamically load multiple external SVG documents in an HTML page and attach them inline. But the lineargradient defined in the first SVG file "pollute" lineargradient defined with the same id in subsequent SVG files. It means the first loaded lineargradient defined with an ID override other lineargradient defined with the same id in other files. Any idea on how to sandbox inline SVG when there are multiple SVG inlined in an HTML page ?

Note : when using embed tag around the SVG tags, they do not "pollute" each other

Answer 1

Unfortunately you have to make sure your IDs are unique across the document. This is a limitation of HTML, SVG and any other markup that can be mashed together like this.

If you are using server-side script to inject the SVG files into your HTML markup, it shouldn't be too bad to replace IDs with unique ones.

You might want to also look at the importSvgString() JS function here: http://code.google.com/p/svg-edit/source/browse/trunk/editor/svgcanvas.js?r=1619#7262