QUESTION: Why is SVG Export adding an extra line of pixel on right and bottom?

[Pete_2022]

Hi there,

I'm trying to figure out why is my exported SVG is adding an extra line of pixels on random edges. By the way, I'm exporting at document resolution (20mm x 20mm at 96 dpi).
I've checked all my transforms of my curves to make sure they aren't positioned a bit off. I also set my preference to display 2 decimal place to make sure I'm viewing things accurately.

What I'm trying to do is to create a tileable pattern in vector and export to svg for Fusion 360.
In case you're wondering, I have to work in millimeter and 96 dpi to get the scale right in Fusion 360, hence these setting.

I've attached the tileable "Circles and Squares" pattern if you want to check it out.
The "EXPORTED SVG" is also available with the extra lines of pixels on the edges if you want to see the issue.

Thanks in advance for your time.

Circles and Squares.afdesign EXPORTED SVG.svg

[v_kyr]

Judging from the SVG file (as I can't open the V2 file on ADe v1) your doc has w = h = 76 px, but the generated curves layer is placed at top left x/y=0 px and has a width/height of 75.6 px. So the document size is 0.4 px wider and heigher ...

... you may want to use exactly w/h = 76 px for the Circles and Squares layer too.

• circles_squares.svg

[Pete_2022]

Thanks for your reply v_kyr.

I've attached another file in Affinity Designer v1 which you can try to open and export a SVG to see the issue.

The svg you're viewing is the problematic file. I wonder if I'm exporting the document properly.
I'm simply using the default setting with the preset "SVG (for export)". Nothing fancy.

Circles and Squares Affinity Designer v1.afdesign

[v_kyr]

When looking at your v1 ADe doc it looks somehow strange in terms of the behavior of the transparent canvas area ...

... as you can see there is always kind of a stroke around your canvas there (like a thin white stroked rect) and your curves layer strangly won't be able to cover that one in this doc!

When I setup a new document with the same doc settings, that isn't happening here on my side ...

• test_svg_gen.afdesign
• test_svg_gen.svg

 

 

 

[Pete_2022]

Thanks for looking into this v_kyr.

This might sound like a really stupid reply but isn't that stroke for displaying the boundary of my image resolution (i.e. 20mmx20mm).
Like a way for me to tell if any of image elements are within?

The image below is just a simple black-filled box slightly offset in a new scene to show you what I mean.
That stroke is suppose to be there isn't it? Or am I missing something?

[Pete_2022]

I decided to do a sanity check by creating a simple scene to export the SVG.

- Created new canvas with resolution 10mm x 10mm at 96 dpi.
- Created a box sized 10mm x 10mm to fill the entire image resolution. There's no strokes; just simple black fill.
- Export the scene as SVG.

The exported SVG still has white lines on the right and below. Is this a bug in Affinity Designer?

I've attached the file (v1) and exported SVG if you want to check them out.
Or you can simply recreate the scene and export the box and check if the exported SVG also has the white lines.

Box_v1.afdesign EXPORTED_SVG.svg

[R C-R]

1 hour ago, Pete_2022 said:

I've attached the file (v1) and exported SVG if you want to check them out.

If you switch the Affinity file's document units to pixels, set the app's decimal places for px units to 3, & select the rectangle, you will see its width & height are not integer pixel values. (They are each 37.795 px.) Change them to integer values, like 38 px, & if you export this to SVG, you will not get the extra stuff at the edges.

[v_kyr]

2 hours ago, Pete_2022 said:

The image below is just a simple black-filled box slightly offset in a new scene to show you what I mean.
That stroke is suppose to be there isn't it? Or am I missing something?

I can't replicate that document behavior in my above referenced and attached file setup ...

... so I wonder why it behaves like this for your document setup ...

 

And for the last exported SVG file ...

... that behaves too strange in terms of it's overall x/y=0 origin handling, though it doesn't show the canvas frame stroke when used ...

[Pete_2022]

Hi R C-R,

Thanks for your reply. Yes, that does get rid of the extra line of pixel.
However when I import the SVG into Fusion 360, the accuracy is compromised. You can see on the bottom-right in my Fusion 360 viewport that the box SVG is now 10.054mm instead of 10mm. Unfortunately accuracy is a must if I want everything to line up when I tile the pattern around a cylinder. Thanks anyway.


Hi v_kry,

That is indeed strange that I see a gray line border while you don't; also in both Affinity Designer v1 & v2 as well. Maybe I accidentally toggled something.
I'm not a expert user and left Affinity Designer pretty much as default as it can be.


Anyway, thanks both for your time. I'll treat this as a bug for now.

I still can work with the SVG in Fusion 360 to get what I want as the accuracy is there which is the main thing.
However I was just curious about this extra line of pixel which I thought would be a simple fix.

[firstdefence]

I don't know how customised you have your Affinity Designer but you could consider a reset of the settings to see if that clears any weird behaviour.

 

• You can reset your app back to its default settings by holding down the CTRL key while launching the app.
• When the Clear User Data window appears, click Select All and then Clear. (uncheck any you feel you need to retain)

 

 

[Pete_2022]

That's a good tip firstdefence, I never knew you can do that; holding down CTRL. I'll give that a go.

Thanks for your time.

[v_kyr]

See also several Fusion 360 support & forum threads about the SVG scaling theme there ...

• https://forums.autodesk.com/t5/fusion-360-support/fix-dimensions-of-imported-svg/td-p/7481059
• https://www.autodesk.com/support/technical/article/caas/sfdcarticles/sfdcarticles/How-to-import-SVG-files-in-Fusion-360.html
• https://www.autodesk.com/support/technical/article/caas/sfdcarticles/sfdcarticles/SVG-file-imports-with-a-wrong-scale-into-Fusion-360.html
• ... etc.

[lepr]

On 4/29/2023 at 10:58 AM, Pete_2022 said:

I'm trying to figure out why is my exported SVG is adding an extra line of pixels on random edges. By the way, I'm exporting at document resolution (20mm x 20mm at 96 dpi).
I've checked all my transforms of my curves to make sure they aren't positioned a bit off. I also set my preference to display 2 decimal place to make sure I'm viewing things accurately.

This has always been a problem with all Affinity vector file exports, not just SVG, despite having been brought to the attention of Serif years ago: export canvas/page/viewbox size gets rounded up to the dimensions that would be required to contain an integer pixel count based on the document PPI (misnamed as DPI in Affinity).

Your 'circles and squares' example Affinity canvas of 20mm x 20mm @ 96PPI is approximately 75.591px x 75.591px, and Affinity exports SVG with viewbox of "0 0 76 76".

Use a text editor to correct the SVG viewbox to "0 0 75.591 75.591".

Note that if you open an SVG in Affinity on a Mac, the document PPI will wrongly be 72 instead of 96, and so the corrected SVG will appear to measure 26.667mm x 26.667mm. In an app that correctly considers the SVG to be 96 PPI, the corrected SVG will measure 20mm x 20mm.

[michaelschufi]

I have just installed AD. This is very unfortunate behaviour, since it is not just the export itself that is affected, but also the slice tool. It seems to work with integers only.

Or is there some place you can define the precision of the tools?

Edited April 30, 2023 by michaelschufi

[Pete_2022]

Hi v-kry,

Thanks for the links. You've been really helpful and greatly appreciated. I have no problem with my SVG export in Fusion 360 as my accuracy are there.
It's just that when I opened the SVG up in Affinity Designer again, there's the extra line of pixel on right and bottom edges. I thought that was weird, that's all.
I don't mind the weirdness as long as it does what I wanted; accuracy that's tileable when I tile the pattern in Fusion 360. Thanks again!



Hi ,,,

That's worked! Editing the SVG viewbox to "0 0 75.591 75.591" in a text editor. I never thought about doing that. Thanks for the ninja tip!
Wish Affinity will address this in the future so we don't have to do it manually.



Hi michaelschufi,

You mean precision like extra decimal places (d.p.) for your values. If so, you can display more d.p. by:
- Edit -> Preference
- "User Interface" Section
- You can set all the decimal places for the unit types on the bottom.
(You need to restart for this for extra d.p. to take effect.)

[R C-R]

18 minutes ago, Pete_2022 said:

(You need to restart for this for extra d.p. to take effect.)

FWIW, this is not necessary in the Mac versions.

[v_kyr]

9 hours ago, michaelschufi said:

...but also the slice tool. It seems to work with integers only.

For the Slice tool yes it only deals with integers, as a slice will automatically size to what is considered to be the extent of the selected item. - See also the descriptions about it here...

• Exporting using Export Persona  <-- ***
• Slices panel
• Slice Tool

[lepr]

On 4/29/2023 at 9:36 PM, Pete_2022 said:

That stroke is suppose to be there isn't it? Or am I missing something?

That hairline border around the canvas will disappear if you enable View > View Mode > Clip To Canvas [\].

You possibly toggled Clip To Canvas off by accidentally pressing the backslash key.

The border allows you to see the canvas extent when objects are bleeding off the canvas and being rendered in their entirety.

[v_kyr]

48 minutes ago, ,,, said:

That hairline border around the canvas will disappear if you enable View > View Mode > Clip To Canvas [\].

You possibly toggled Clip To Canvas off by accidentally pressing the backslash key.

The border allows you to see the canvas extent when objects are bleeding off the canvas and being rendered in their entirety.

Though I wonder that the "Clip To Canvas" setting is then made persistent and thus remembered in saved *.afdesign files here. Since other View Mode settings are not AFAI can tell! - For example I never have that activated, but through the OPs file it was then activated but only for his file!

[Pete_2022]

Yes, that's it! Thanks for the info ,,,. I do remember playing with that feature while learning Affinity Publisher. Thanks again!