Loading a SVG file with svg.js

Question

I have a HTML5 page with a SVG element in it. I would like to load a SVG file, extract some elements from it and dispose them one by one with a script.

I used jQuery to load the SVG file successfully, using .load(), having inserted the SVG tree inside the DOM. But I would like to try svg.js to manipulate the elements, but in the documentation I cannot find a way to initialize the library using an existing SVG element, where I will get the objects.

Idea is to access the loaded SVG element (or load it directly with the svg.js library), copy the single objects to another element and move them where I need. How to do this?

Answer 1

You should take a look at the svg.import.js plugin

The documentation says...

All imported elements with an id will be stored. The object with all stored elements is returned by the import method:

var rawSvg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg [...]>"';
var draw = SVG('paper');
var store = draw.svg(rawSvg);

store.polygon1238.fill('#f06');