Inkscape SVG to Degrafa Path

, , , ,

Going from SVG data to a Degrafa Path couldn’t be easier: just copy & paste. You can watch this video tutorial or you can check out this demo.

But there is one trick for Inkscape: even though the coordinate origin on the Inkscape document is the normal cartesian origin in the bottom left and the y-axis points up, the SVG output always uses the upper left corner of the document as the origin and the y-axis points down (per the SVG Spec, § 7.3).

To demonstrate, I created a new document in Inkscape, set my dimensions to 500 x 500, and placed a simple path (which happens to be a square) in the upper left corner:


You can see by the rulers in Inkscape that the square’s origin is at (0,500).

If we save our square and examine the SVG output, we see:

<svg ...>
  <g ...>
    <path d="M 0,0 L 100,0 L 100,100 L 0,100 L 0,0 z" />

If we ignore everything in the file except the relevant path data, we can see the very first path command is M 0,0 which is path-speak for move to (0,0). This is exactly as expected from the SVG spec: upper left is the coordinate origin. The cartesian origin in Inkscape is bogus!

Next, we can just copy the path data from the SVG file and paste it into the data attribute of a Degrafa Path component.

<Degrafa:Path data="M 0,0 L 100,0 L 100,100 L 0,100 L 0,0 z">
        <Degrafa:SolidFill color="#EECCEE" />
        <Degrafa:SolidStroke color="#FF00FF" weight="3" />

Give it a fill color and a stroke color, and we get a pretty purple square. Now I know my Degrafa Path component will have a square in the upper left, because I know my square was in the upper left in Inkscape. Nice and easy.





Nicely explained! Another useful hint is using Inkscape’s File->Document Properties->Fit Page to Selection.

This by itself may not be the answer, as it can often apply transforms to the paths (which could also be translated to Degrafa transforms, but you may not want that). So another useful approach is to then select the group with the transform applied and choose Object->UnGroup thereby transforming the path coordinates themselves.

There are a lot of shortcuts once you get to know both Inkscape and Degrafa, it’s great that you’re taking the time to show them. It’s also handy to use the Edit->XML Editor in-built editor for browsing the xml tree, and extracting bits and pieces rather than having to open up the svg content in a separate xml editor for example.



All good points, thanks for the comment.

Degrafa transforms are super useful, but I tend to use them to align multiple Path components after I have the origin of each individual Path correctly set.



I like these kinds of ‘never-thought-about-it’ methods, very cool.

© 2021