Creating Paper.js PathItem from SVG

Question

Disclaimer: this is my first approach to vector graphics ;)

Im writing a web-app whrere the user upload some image (to compose a drawing), and he is supposed to upload a vector image (SVG) to act as 'mask'.

Im using the Paper.js library.

So, my goal is to read the SVG and create a paper.js PathItem to represent it (and then add fillcolor, whatever).

I tryed with a simple shape:

That in SVG looks like:

// Adobe Illustrator
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<polygon fill="none" stroke="#000000" points="48.771,12.137 59.323,33.518 82.919,36.947 65.845,53.59 69.875,77.09 48.771,65.994 
    27.667,77.09 31.697,53.59 14.623,36.947 38.219,33.518 "/>
</svg>


// Inkscape pure svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100"
   height="100"
   viewBox="0 0 100 100"
   id="Livello_1"
   xml:space="preserve"><metadata
   id="metadata3358"><rdf:RDF><cc:Work
       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
   id="defs3356" />
<polygon
   points="59.323,33.518 82.919,36.947 65.845,53.59 69.875,77.09 48.771,65.994 27.667,77.09 31.697,53.59 14.623,36.947 38.219,33.518 48.771,12.137 "
   id="polygon3352"
   style="fill:none;stroke:#000000" />
</svg>

Processing this kind of shape is really easy, transform the points string in a array, create a path and call .add() for each element.

The problem comes when the shape is not just lines, for example:

I really dont know how to translate the curved part into a paper.js commands! The SVG contains a structure like that:

<path fill="#FFFFFF" stroke="#000000" d="M74.89,73.117H34.605c-11.32,0-20.497-9.177-20.497-20.497v-5.695
    c0-11.32,9.177-20.497,20.497-20.497H74.89"/>
<line fill="none" stroke="#000000" x1="74.89" y1="26.428" x2="74.89" y2="73.117"/>

I gave a read to W3C svg transforms with no luck, I really doesnt get how to translate the M 74.89,73.117 H 34.605 c -11.32,0 -20.497,-9.177 -20.497,-20.497 v -5.695 c 0,-11.32 9.177,-20.497 20.497,-20.497 H 74.89 part.

Any idea?

Answer 1

Are you aware that Paper.js comes with its own full blown SVG parser and exporter that allows you to import and export SVG content very easily?

There is no tutorial about it yet, but the features page shows two examples:

http://paperjs.org/features/#svg-import-and-export

And it is documented in the reference here:

http://paperjs.org/reference/project/#importsvg-svg http://paperjs.org/reference/item/#importsvg-svg

I hope this helps!

Answer 2

Transforms are not what you're looking after, it's paths. You should be aware that correctly parsing any path data out there requires some work and an established SVG library doesn't get it right to this day (I'm talking about librsvg here).

Fortunately, the SVG DOM comes to the rescue. The path element has the property normalizedPathSegList, which simplifies the data from the d attribute and allows you to iterate over all the segments. See an excellent answer to a similar question: Scripting <path> data in SVG (reading and modifying).

fabric.js is another library that might be of interest for bridging the SVG/canvas gap.