SVG Export transform matrix, rounding errors

[JimboJones]

Hi there,

I have some problems exporting SVG for Web.
I created a 60px x 60px art board and drew a pixel perfect icon. I set units to 3 dedimals in preferences.

Now comes the export mess:

1) The viewport in the SVG is set to width="60px" height="61px" Why?

2) Every path gets a transform matrix. WHY? If I flatten transforms then there is a mess of calculated numbers that doesn't fit the initial positions.

3) I get a clip path although there is noone set in my document.

With als this there is no chance to get the icon perfectly aligned on a pixel grid.

What can I do about this?

[MEB]

Hi JimboJones,
Welcome to Affinity Forums
Check the artboard X,Y coordinates in the Transform panel (click the artboard layer in the Layers panel to select it). Make sure they are integer values (same for width and height - make sure they are exactly 60x60)

Can you attach the afdesign file so we can check the rest?

[JimboJones]

cz-logo.svgcz-logo.afdesign

Thanks for your quick reply!

Here is the requested file, alongside the corresponding svg I created from it.

1 hour ago, MEB said:

Check the artboard X,Y coordinates in the Transform panel

I did, they are exactly corrent with three decimals, eg 60.000 pt

[R C-R]

3 hours ago, JimboJones said:

5 hours ago, MEB said:

Check the artboard X,Y coordinates in the Transform panel

I did, they are exactly corrent with three decimals, eg 60.000 pt

They are set to integer point (pt) values but because the .afdesign file is set to 300 dpi they are not set to integer pixel values. If you change the document units to pixels (most easily done by right-clicking on the units name in the rulers when they are visible) you can see this.

[JimboJones]

10 minutes ago, R C-R said:

They are set to integer point (pt) values but because the .afdesign file is set to 300 dpi they are not set to integer pixel values. If you change the document units to pixels (most easily done by right-clicking on the units name of the rulers when they are visible) you can see this.

Ok, this is because I copied the art board to a new file and didn't change the resolution. But this doesn't change anything to the output. Even if I transfer everything to px values everything gets messed up in my SVG

[R C-R]

3 hours ago, JimboJones said:

Ok, this is because I copied the art board to a new file and didn't change the resolution. But this doesn't change anything to the output. Even if I transfer everything to px values everything gets messed up in my SVG

What specifically do you mean by messed up? 

[JimboJones]

I define a path in Designer like this:

One point is on 2.000 px from top 5.000 px from left. After creating the SVG I get numbers like 12.234 or 4.114. I know that the numbers change as SVG works different when creating paths.
But I'm missing the ability to achieve precision. It doens't matter if "flatten tranform" is activated. The numbers just don't correspond to the original. This leads to an imperfect svg that doesn't align to the pixel grid as expected. Also, as mentioned above things like clip paths I didn't create in my Designer file, but are there in the SVG.

Maybe we need a preference in the SVG export where you can define the decimals. Or a general "save SVG for Web" that reduces some of the not needed complexity.
Figma wrote about that https://www.figma.com/blog/with-figmas-new-svg-exports-less-more/.
Maybe this helps for some future updates

 

 

[MEB]

Thanks for the file JimboJones. I'm logging this/passing your file to dev for comments.

[MEB]

Hi JimboJones,
You are getting decimals because your points (nodes) are not pixel aligned either. If you convert the document to pixels, enable Flatten transforms (More button in the SVG export dialog) and ensure all nodes are on integer values you should get what you want - clear SVG values with no decimal parts (matching the corresponding nodes coordinates).

[JimboJones]

No,

21 hours ago, MEB said:

If you convert the document to pixels, enable Flatten transforms (More button in the SVG export dialog) and ensure all nodes are on integer values you should get what you want - clear SVG values with no decimal parts (matching the corresponding nodes coordinates).

No, still weird numbers all over the place.
I did some further testing. I guess it all has to do with transforms.

If I draw new lines, nodes etc. they all are exported pixel perfect. If I don't flatten transforms, there are no transforms in the SVG.

Maybe there are some transforms saved in the background somewhere, messing up the numbers?

[JimboJones]

Ok, I gues I know what the problem is and have a workaround. And an idea for improvement, as well.

Here are some steps to recreate the initial problem:

1. If you draw a rectangle, path, whatever shape with integer values, they are exported to SVG as expected (with integer values in SVG).
2. As soon as you start transforming your rectangles/paths a transform matrix is added to the SVG (NO integer values in SVG!)
3. You can flatten those tranforms in export settings, but doing so won’t bring back integer values to SVG.

So, the problem is, when you transform an object, the transformation factor seems to be saved somewhere. This info is then used for the transform matrix in the SVG.

To solve this and erase the transform information you can join your shape with another shape and you get back your integer numbers without transform matrix (when exporting to SVG).

A better solution would be to add a visual cue, some form of indication to the transform panel, wether a shape is transformed or not.
This way you could

1. see that your current shape is transformed in some way (scaled 1.5, for example) and
2. provide an option to reset the value or to use the current transformation as new default.

Would be great if someone could pass this to the dev team,

Thanks!

By th eway, @jc4d asked for something similar a while ago, I guess:

 

[jpschroeder]

Thank you @JimboJones! I really need clean SVG paths for web development and this has always forced me to keep going back to illustrator — but your "merge with another shape" idea totally worked. Finally.

It would be really valuable if AD or any other software out there provided better svg tooling for web developers.