How can BonsaiJS load external SVG files?

Question

I am learning to work with BonsaiJS and would like to import an external SVG image on the stage.

At http://docs.bonsaijs.org/overview/Path.html I learnt that there are three ways to create a new Path() sending SVG paths, path commands or path points as arguments, but for more complex SVG files this is too much of a hassle to make this work.

At How Can I Animate my SVG files with a JS Library - Is Bonsai Ideal for this? I read one can use the new Bitmap() method, but SVG's are turned into... bitmaps.

Am I missing something? Thanks in advance!

Answer 1

At the time it seems impossible for BonsaiJS to load external SVG's like it is possible to load external bitmap images. The BonsaiJS docs (http://docs.bonsaijs.org/overview/Path.html) do provide three methods to manually handle paths from an SVG file separately.

Path nodes

If your SVG contains <path> nodes (tags), get the value of the d attribute and apply the fill manually:

SVG

<path id="pathId" fill="#ff6600" d="M54.651,316.878c9.098,19.302,3.208,46.085,11.193,67.117 c0.687,2.48-4.441-0.06-2.581,5.486c9.171,20.188,10.61,52.755,17.331,79.04l-1.88-0.961c1.652,5.139,7.946,8.864,10.469,13.37">

BonsaiJS

var myShape1 = new Path("M54.651,316.878c9.098,19.302,3.208,46.085,11.193,67.117 c0.687,2.48-4.441-0.06-2.581,5.486c9.171,20.188,10.61,52.755,17.331,79.04l-1.88-0.961c1.652,5.139,7.946,8.864,10.469,13.37");
myShape1.fill('#ff6600');

Polygon nodes

If your SVG ie. contains <polygon> nodes, get the string value of the points attribute, split this string into an array and turn all string elements into floats. Again also apply the fill manually:

SVG

<polygon id="polygonId" fill="#FFFFFF" points="76.5,253.5 94.5,165.5 108.5,125.5 128.5,93.5 164.5,66.5 195.891,44.719 254.5,36.5 299.656,36.5 348.5,41.5 414,66 459,102 488,150.5 505.5,218.5 508,331.5 508,390 504.5,424.5 480,463.5 450,509.5 378,554.5 300,566 226,556.5 168,535.5 109.5,476 87,419.5 76.5,339.5 "/>

BonsaiJS

var points = "76.5,253.5 94.5,165.5 108.5,125.5 128.5,93.5 164.5,66.5 195.891,44.719 254.5,36.5 299.656,36.5 348.5,41.5 414,66 459,102 488,150.5 505.5,218.5 508,331.5 508,390 504.5,424.5 480,463.5 450,509.5 378,554.5 300,566 226,556.5 168,535.5 109.5,476 87,419.5 76.5,339.5";
points = points.split(/[\s,]+/).map(function(point) {
  return parseFloat(point);
});
var myShape2 = new Path(points).fill('#ffffff');

Then...

After defining all parts, one can create a group and add all parts to 'reconstruct' the original SVG image, ie.:

var myGroup = new Group().addTo(stage);
myShape1.addTo(myGroup);
myShape2.addTo(myGroup);

Answer 2

At http://docs.bonsaijs.org/overview/Path.html I learnt that there are three ways to create a new Path() sending SVG paths, path commands or path points as arguments, but for more complex SVG files this is too much of a hassle to make this work.

Yes, Bonsai let you import SVG (like) Paths.

At How Can I Animate my SVG files with a JS Library - Is Bonsai Ideal for this? I read one can use the new Bitmap() method, but SVG's are turned into... bitmaps.

Bonsai doesn't let you import SVGs in general. Only paths. Which means that Bonsai doesn't give you API for accessing the inner nodes of your SVG file.

Using the Bitmap API is not a way of importing your SVG. The SVG file is treated as any regular image format. It depends on the platform and renderer whether it is going to be rastered or not. It can be compared with using DOM's HTMLImageElement.