Skip to content

How can I use snap.svg with external files?

I know I can use an inline <svg> element to load snap svg. However I would like to use an non-inlined file via an <img> element:

<img alt="comparison" src={arcStatic('/images/comparison.svg')} />
var diagram = Snap('img'),
  group = diagram.select('#someGroup')

Where someGroup is an svg g element, fails. group is null.

Additionally:

console.log('diagram.constructor.name);

Shows this is an Element rather than a Snap instance.

How can I use snap.svg with external files?

Answer

Use the Paper.image function: http://snapsvg.io/docs/#Paper.image and put the images into the page with snap, so that you can access them.