Unable to preload and display SVG with CreateJS

Question

I am trying to preload a set of SVG objects and display them using CreateJS/PreloadJS. So far I was able to display a SVG object without preloading, but as soon as I use the

Answer 1

I found simple solution. Just force PreloadJS to use image loader, not SVGLoader.

{src:"img/bg.svg", id:"bg", type: createjs.LoadQueue.IMAGE}

Then you can convert it

var bg = new createjs.Bitmap(loader.getResult('bg'));  
stage.addChild(bg);

Answer 2

There are a few issues with your sample, which prevent the preloading of the asset, but unfortunately if those are addressed, it still will not draw into the Canvas.

Getting Preloading to work: The asset will need to be hosted on a server with CORS enabled to do cross-domain loading. PreloadJS will use XHR to load SVG, which can not load cross-domain without some extra work. The updated sample below shows that in action.

// Note: Requires very latest PreloadJS (NEXT in GitHub)
var assetQueue = new createjs.LoadQueue(true, null, true);
// 3rd parameter is "crossOrigin", and requires a CORS server.

http://jsfiddle.net/lannymcnie/hhd4fwks/

Once preloaded, the asset can be appended to the DOM, but not used as a source for an EaselJS Bitmap. It appears that Canvas can not use drawImage with a local SVG source. It CAN be appended to the DOM thought.

The reason your second approach did work was that it was automatically treating the source of the Bitmap as an image path, so it loaded it as an image (Bitmap creates an image behind the scenes when it is passed a string path)

It is probably a good idea to add image-based preloading to PreloadJS - I will add an issue to the GitHub.