SVG Export bugs: distorted corners' stroke, text

[Davide.Barranca]

If you export to SVG a rounded corners rectangle with a stroke it gets heavily distorted/stretched depending on the rectangle's ratio.

This is Designer (as it should appear):

 

This is the result of the SVG exportation – setting: SVG (for Export) – loaded in a browser

The fill makes no difference (I've tried with and without)

Also Text is kinda funny: is this normal?

<g id="Adtion-text" transform="matrix(0.354872,0,0,0.976774,-577.26,976.881)">
  <text x="1659.04px" y="248.288px" style="font-family:'SourceSansPro-Bold', 'Source Sans Pro', sans-serif;font-weight:700;font-size:52px;">Action Butt<tspan x="1916.9px " y="248.288px ">o</tspan>ns</text>
  <text x="1659.04px" y="308.288px" style="font-family:'SourceSansPro-Regular', 'Source Sans Pro', sans-serif;font-size:40px;">Apply the e<tspan x="1844.96px 1867.52px " y="308.288px 308.288px ">ffe</tspan>ct<tspan x="1919.8px " y="308.288px ">,</tspan> Canc<tspan x="2020.28px " y="308.288px ">e</tspan>l</text>
  <text x="1659.04px" y="360.288px" style="font-family:'SourceSansPro-Regular', 'Source Sans Pro', sans-serif;font-size:40px;">or ac<tspan x="1740.6px 1758.04px " y="360.288px 360.288px ">ce</tspan>ss Document<tspan x="1993.64px " y="360.288px ">a</tspan>tion,</text>
  <text x="1659.04px" y="412.288px" style="font-family:'SourceSansPro-Regular', 'Source Sans Pro', sans-serif;font-size:40px;">Support and Pr<tspan x="1912.68px 1932.4px 1943.68px 1963.64px 1977.12px " y="412.288px 412.288px 412.288px 412.288px 412.288px ">efere</tspan>nc<tspan x="2036.4px " y="412.288px ">e</tspan>s</text>
</g>

Please note how the four lines get split into a myriad of useless "tspan" tags (I had to remove them all manually)
Designer 1.8.4 on macOS 10.15.7

Edited January 4, 2021 by Davide.Barranca
Added remarks about text

[Hangman]

Not seeing any issues here with rounded corner rectangles on SVG export, are you able to attach the file you're having issues with?

[Davide.Barranca]

Sure, here is the exported SVG and the source .afdesigner.

I ended up doing the SVG by hand with code, it's way (way) cleaner – a bit of a PITA, but more readable. Quite unclear why all those unnecessary <tspan>s and rect turned into paths: I suppose it makes sense for complex designs but a handful of basic shapes with with fills could be handed more easily. ¯\_(ツ)_/¯

RoundedCorners.zip

[Hangman]

The issue appears to relate to any shapes that are scaled in any way after first being drawn when you have the stroke aligned to centre, so e.g. if you draw a 500 x 150px rounded rectangle and apply a 3pt stroke and do nothing else to it then the exported SVG file shows the stroke as 3pt (assuming a 72dpi document, the stroke will appear as a 3px stroke in the exported SVG).

Draw an 500 x 300px rectangle and then resize it to 500 x 150px, apply a 3pt stroke and export to SVG and then the stroke size shown in the SVG is scaled to 3.79pt/px

Draw an 500 x 600px rectangle and then resize it to 500 x 150px, apply a 3pt stroke and export to SVG and then the stroke size shown in the SVG is scaled to 4.12pt/px

Draw an 500 x 500px square and then resize it to 250 x 250px, apply a 3pt stroke and export to SVG and then the stroke size shown in the SVG is scaled to 6.00pt/px

 

If you set the stroke to either Inside or Outside the issue goes away.

The other issue seems to be that the exported SVG files only show the stoke width for files where the stoke is aligned centre, when the stroke is aligned inside or outside the stroke width is missing in the exported SVG.

So I would say both of these issues are bugs! I have a feeling they may already be known bugs but I'm not sure, hopefully someone from Affinity can confirm.

[Gabe]

Hi both,

Sorry for the delayed reply. We were closed over Christmas/NY. 

We are aware of this and it has already been logged with our developers.