Create SVGs without translation for fabric.js with Inkscape

When using Inkscape to create SVGs, your path’s are ofter grouped together and translated. This translation might cause problems when using the SVG with fabric. Let’s assume a simple cross, consisting of two crossed lines. Inkscape produces something like this out of the box.

https://gist.github.com/msievers/8360079

I found a question on Stackoverflow which solves this (http://stackoverflow.com/questions/13329125/removing-transforms-in-svg-files)

The trick is to remove the g tags around your paths, reopen the svg in Inkscape, rearrange the shapes and to save again. Now the transform statement is gone and you can “re”-edit your SVG using Inkscape.

Create SVGs without translation for fabric.js with Inkscape

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s