I would like to load an external SVG file, and I tried the demo for the svg.import.js plugin.

But it failed to load this file: .svg

I need to load files like this and I cannot modify them.

What is the problem here?

Magnus

I would like to load an external SVG file, and I tried the demo for the svg.import.js plugin.

But it failed to load this file: http://upload.wikimedia/wikipedia/mons/5/57/Chess_Maurizio_Monge_Fantasy_wk.svg

I need to load files like this and I cannot modify them.

What is the problem here?

Magnus

• javascript
• svg

• I don't think it likes the extra inkscape bits that inkscape puts in by default. If you can't modify the files then you're stuck as they need to be saved by inkscape as raw SVG. – Robert Longson Commented Oct 9, 2014 at 21:37
• I have tested saving it as plain svg, but it still doesn't work. Also there are only a few additional tags in the inkscape svg version beginning with 'inkscape:'. This seems to be a weakness of svg.import.js. Snap.svg can load the original file without problems. – Magnus Warker Commented Oct 10, 2014 at 3:04

1 Answer 1

The svg.import.js plugin is obsolete as of SVG.js v2 and up, as stated here:

https://github./svgdotjs/svg.import.js#warning

This is now built-in with the draw.svg() method. Here is an example in the docs:

https://svgdotjs.github.io/importing-exporting

However, you will need to load the SVG data, not a url. You can however load an external file using ajax and pass the file's contents to the SVG.js instance. Something like:

var ajax = new XMLHttpRequest()
ajax.open('GET', 'your/file.svg', true)
ajax.send()
ajax.onload = function(e) {
  draw.svg(ajax.responseText)
}

Note: if you are loading files from Inkscape, it's safer to use the Plain SVG format.