With the raphael.js library, paths are described using the SVG path syntax, (e.g. M98.36,214.208l2.186-1.093V210.2l-3.378,0.117l1.174,4.137L98.36,214.208z, which provides a very pact way to create a shape (especially if your shape is drawn with an external application such as Illustrator).

I'm interested in using the paper.js library (not SVG-based), but a first look at the documentation seems to show that paths are built step by step through object methods. This is a very different approach ("path building" vs "path description", one could say), not very suitable to my needs.

So: is there a way to use SVG Paths in paper.js? Or a similar "path description" solution?

Reference:

• .html#Paper.path

With the raphael.js library, paths are described using the SVG path syntax, (e.g. M98.36,214.208l2.186-1.093V210.2l-3.378,0.117l1.174,4.137L98.36,214.208z, which provides a very pact way to create a shape (especially if your shape is drawn with an external application such as Illustrator).

I'm interested in using the paper.js library (not SVG-based), but a first look at the documentation seems to show that paths are built step by step through object methods. This is a very different approach ("path building" vs "path description", one could say), not very suitable to my needs.

So: is there a way to use SVG Paths in paper.js? Or a similar "path description" solution?

Reference:

• http://paperjs/reference/path
• http://raphaeljs./reference.html#Paper.path

• javascript
• svg
• raphael
• paperjs

• From a first look it seems like no. I might be wrong tho. – zozo Commented Feb 21, 2012 at 12:04
• In fabric.js, you can instantiate paths from string that's in SVG format: new fabric.Path('M 65 0 Q 100, 100, 200, 0', { stroke: 'red' }) – kangax Commented Feb 24, 2012 at 2:11
• fabric.js? Yet another library? Thanks, I'll have a look. – Nicolas Le Thierry d'Ennequin Commented Feb 24, 2012 at 12:07

1 Answer 1

You can use SVG path syntax as described in the Paper.js reference for pathData

var pathData = 'M98.36,214.208l2.186-1.093V210.2l-3.378,0.117l1.174,4.137L98.36,214.208z';
var path = new Path(pathData);

path.strokeColor = 'black';

// Scale the copy by 1000%, so we see something
path.scale(10);

And here as an example as a Paper.js Sketch