Known Participant

Question

Animate HTML Canvas/JS and Loading SVG From File

Forum|Forum|6 years ago
September 24, 2019
3 replies
1796 views

Hello,

I am migrating from AS3 to HTML5/JS -- I am very new at this. I have read the w3schools.com JS tutorial, as well as createJS.com . With AS3, I had 500 SWF files (containing vector graphics) that could be loaded dynamically, and now I am converting them to SVG. With the HTML5/JS method, I need to dynamically load any of the 500 SVGs.

I've had success loading a .JPG with this:

this.stop();
this.imageHolder.removeAllChildren();
var p = new createjs.Bitmap("images/img3.jpg"); // THIS WORKS
// var p = new createjs.Bitmap("images/global_6000.svg");  //THIS DOESN'T WORK
// var p = new createjs.MovieClip("images/global_6000.svg");  //THIS DOESN'T WORK
// var p = new createjs.Shape("images/global_6000.svg");  //THIS DOESN'T WORK
this.imageHolder.addChild(p);

The SVG doesn't appear.

I have searched the web exhaustively, and I cannot find an Animate HTML Canvas explanation of how to load .SVG files and display them. If anyone could point me in the right direction, I would appreciate your help. Thank you!

This topic has been closed for replies.

JoãoCésar17023019

Community Expert

Yeah... IE is a different story... Please check out this issue: https://github.com/CreateJS/EaselJS/issues/989

About testing the output, what Animate does is to open the default browser set in your OS. On Windows, if you open the start menu and type "default apps" and choose the first option in the search results, you can change the default browser.

Regards,

JC

JoãoCésar17023019

Community Expert

Hi.

You need to pass the type argument as "image" to tell PreloadJS to use the image loader and not the SVG loader. It seems to be an issue that as far as I know is still no fixed.

So your loadFile method would be:

loader.loadFile(
{
    id: "test",
    src: "star.svg",
    type:"image"
});

And, yeah, SVGs are loaded as bitmaps and not vector graphics.

Regards,

JC

avtutorialsAuthor

Known Participant

JC, holy cow... not only does it need the type: "image", but none of this code works in IE! It only works in Chrome! In Adobe Animate, when I test with CTRL-ENTER, it opens IE -- and, no SVG is displayed. I pasted the URL into Chrome, and the SVG is displayed! Now, if I could figure out how to get Adobe Animate to CTRL-ENTER with Chrome instead...

It is also interesting that, although the SVG is brought into a Bitmap object, it's still rendered as a vector graphic in the browser. I don't understand that logic, but it seems to be what I need.

JoãoCésar17023019

Community Expert

Hi.

Use LoadQueue.

Example (ES6):

const loader = new createjs.LoadQueue(false, null, true);

loader.on("complete", e =>
{
    const bitmap = new createjs.Bitmap(e.currentTarget.getResult("test"));
    this.addChild(bitmap);
});

loader.loadManifest([{id:"test", src:"star.svg", type:"image"}]);

Regards,

JC

avtutorialsAuthor

Known Participant

Hi JC,

Thank you, but it's not displaying the star.svg (I did ensure that star.svg is in the same folder as the HTML/JS files).

I also tried the following (based on the LoadQueue docs), with a lot of variations, and still, no SVG is displayed.

Will using createjs.Bitmap result in a raster, and not a vector, graphic? Is that why it's not displaying?

var loader = new createjs.LoadQueue(true);
loader.on("fileload", handleFileLoad, this);
loader.loadFile({id:"test", src:"star.svg"});
loader.load();

function handleFileLoad(event) {
	const bitmap = new createjs.Bitmap(event.result);
	this.addChild(bitmap);
}

Thanks.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded