SVG path to shape in createjs

Question

How can I convert SVG Path to a shape in createjs?

I am newbie in createjs.

score 1 · Answer 1 · answered Jul 31 '18 at 17:33

1

Currently there is no direct support for SVG » Graphics (SVG is only supported as a Bitmap source).

You could fairly easy drop into Adobe Animate, and publish to Graphics.

You could also use something like SnapSVG to render it, and add it as a DOMElement, or use something like canvg to draw it to a Canvas, and then use the Canvas as a bitmap source.

var inst = new createjs.DOMElement(someSVGElement);
// OR
var inst = new createjs.Bitmap(otherCanvas);

I hope that provides some insight. Sorry we can't offer direct support yet.

answered Jul 31 '18 at 17:33

Lanny

11,244
1
22
30

Thank you very much for your answer. Your answer was really great help for me. Could you possibly let me know whether it is possible or not to draw a shape from the Path tag in createjs. For example I wanna draw a shape from . – Dmitrii Potapov Aug 01 '18 at 06:24
Its certainly possible, but you will have to convert the drawing instructions yourself, as there is no automatic way to convert it. Note that the "decodePath" method in Graphics is meant to convert the EaselJS-specific path definition exported from Adobe Animate, and not for SVG paths -- but you could probably start there if you want to take a whack at it! – Lanny Aug 01 '18 at 13:43

score 0 · Answer 2 · answered Sep 14 '20 at 22:36

As Lanny noted in an answer above, there is a way to import an svg into Adobe Animate and take the path from its' HTML5 Canvas output.
It goes in a minified format, and the decodePath createjs function can be modified to parse it to a set of actions and coordinates.
Also the svg format is can be parsed directly, but you'll have to implement it yourself (here is an incomplete proof of concept).

SVG path to shape in createjs

2 Answers2