Svg Export

[Gokhan Eser]

Hello,

I'm having a problem when I export a svg asset. Is something going wrong? There is a margin in svg files.

I cannot use these files in web based application.

[Callum]

Hi GokhanEser,

Please could you copy the object in-question to a new file then save a copy of that file and attach it to this post so I can investigate this further.

Thanks

C

[v_kyr]

On 1/17/2021 at 12:15 PM, GokhanEser said:

There is a margin in svg files.

Check the SVG file inside a webbrowser and text editor too, in order to see how much of the SVG defined overall margins size amount differs from the plain objects size settings inside here.

[Gokhan Eser]

8 hours ago, Callum said:

Hi GokhanEser,

Please could you copy the object in-question to a new file then save a copy of that file and attach it to this post so I can investigate this further.

Thanks

C

Hello Callum,

You can check the file.

Untitled-1.afdesign

[Gokhan Eser]

6 hours ago, v_kyr said:

Check the SVG file inside a webbrowser and text editor too, in order to see how much of the SVG defined overall margins size amount differs from the plain objects size settings inside here.

Hello, v_kyr

I've tried, the results are as follows.

[v_kyr]

That looks to me due to Affinity document size and thus dependent SVG viewBox value rounding issue here. A SVG viewBox uses full pixel values (whole integer numbers and no real numbers). When exporting Affinity usually rounds up or down the document (SVG viewBox) size values, but in a way the objects still fits sizewise inside those boundaries.

In your case it looks like this ...

So Affinity here defines whole pixel values for the exported SVG, meaning even the objects (curves) size in w/h will be correct w = 53.1 px, h =10.2 px it has to make the SVG viewBox values as whole number pixels (width = 54, height = 11), so the object fits inside at all.

So what can you do in order to have not those margin gaps is, best use whole number (whole pixels) in Affinity for doc and curve sizes here instead of real numbers, when you know a drawing will be exported as SVG. - Or you have to alter the SVG viewbox settings inside a text editor to overcome the margin gaps, as far as the objects size dimension still fits completely inside then.

Just for demonstration purposes here, if I alter the doc settings in SVG to viewBox="0 0 53 10" then of course the margin gaps will disappear ...

... but as you can see the object (curve) then doesn't fit completely into the docs area, it will stay 0.1 px over in width and 0.2 px in heigh! - You can see it here with these files yourself ...

• curve_sized_doc.afdesign
• curve_sized_doc.svg

So the best is always to take into account here for SVG when exporting, that it defines it's viewBox (aka doc boundaries) as whole numbers and thus that there might be then size roundings involved, which might give some gaps/margins!

 

[Gokhan Eser]

Thank you @v_kyr

I will review them again. As you mentioned, it can help solve this problem.

Thank you again.