SVG Export in AD is Broken

[dkx888]

There is a wide range of needed optimizations of the svg export in Affinity Designer. I am just listening the most important (buggy) ones for now:

1. The svg tag has the width and height property as percental values, this can cause multiple (positioning / scaling) issues for the web usage (I am a Web Developer, 12+ years) while rendering the svg appropriate and the values are often differently in different browsers for the usage of early access in the DOM, the CSSOM and even for JS. That's why most SVG Exports usually use precise attribute values, e.g. instead of the current export <svg width="100%" height="100%" viewBox="0 0 596 842" ... it needs to be exported as <svg width="596" height="842" viewBox="0 0 596 842" ...
2. AD exports the path's, etc. with inline styles (style="...") instead of the acutal svg properties (e.g. fill="...", stroke="...", font-style="...", etc.). Therefore it's currently hard to override those values outside the svg and even for dynamic JS manipulations / effects
3. The id's of exported elements have the layer's names, therefore there are sometimes problems (e.g. <g id="ArtBö--ard11" serif:id="ArtBö &lt;ard1">) with special characters (including spaces, etc.), especially when trying to access them, sometimes they even brake things. They should be removed from the final svg export entirely (some of the special characters aren't w3c valid for id's anyway). By the way, the exported serif:id="..." makes the svg way bigger in size then it should be (bad loading times on the web), it makes a huge differences when it comes to complex svg's

Other export tools / competitor tools do it as explained above and there are no problems.

If there is some more detailed technical information needed then let me know.

 

[dkx888]

Push..

[gludion]

Hello,

I've mentionned other issues about SVG:

Hope Serif will pay attention to those feedbacks and improve SVF export..

[BIOSMonkey]

I am doing SVG export as well and have been doing a number of experiments to see what style/effects I can get away with that export to true filters etc. instead of being rasterized.   I think the bottom line is that AD is not specifically a true SVG editor, and essentially does what it can during export.

But I am curious what other tools you use?

[dkx888]

On 9/5/2019 at 3:26 PM, BIOSMonkey said:

I am doing SVG export as well and have been doing a number of experiments to see what style/effects I can get away with that export to true filters etc. instead of being rasterized.   I think the bottom line is that AD is not specifically a true SVG editor, and essentially does what it can during export.

But I am curious what other tools you use?

It's not about beeing a SVG editor, but exporting SVG's based on simple groundrules should be standard. Like in AI, Sketch, etc.., those are also not svg editors but they are doing their job well. I hope Affinity does take this issue seriously, because the exported svg results are just not usable for a couple of use cases / areas.