Jump to content
Sign in to follow this  
dkx888

SVG Export in AD is Broken

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×