Jump to content

Recommended Posts

I purchased Affinity Designer several months ago to facilitate my web development flow while avoiding subscription-based software (Illustrator) and buggy freeware (Inkscape).
Creating web designs in AD is a superb experience, but exporting parts as SVG for web usage, often interactive, is an absolute nightmare. My workflow bottlenecks hard when I have to manually modify a majority of the elements within the file. Worst yet, if any design change is required I have to manually modify the elements again on a fresh export. To be completely honest, if Inkscape didn't crash and corrupt so frequently I'd put up with its awful UX purely for its web-oriented SVG exporting advantage.

Steps I frequently need to do manually for web usage and file size reduction:

  1. Create style element and convert matching style attributes into shared classes
  2. Reduce excessive tspan occurrences
  3. Convert common positioning to group transforms
  4. Occasionally convert absolute to relative coordinates (paths, lines, etc.)
  5. Add custom attributes (ex: Vue.js attributes)
  6. Remove AD attributes (serif:id)


What can I do within AD to reduce the amount of manual corrections on web-oriented SVG exports?
Are there any plans to add such features to AD in the near future?


A personal example of a prettified AD file without any other modification:


Share this post

Link to post
Share on other sites
13 hours ago, Taylor said:

What can I do within AD to reduce the amount of manual corrections on web-oriented SVG exports?

Nothing, it's glued inside the SVG export code generator and so needs to be changed there for how the code is generated and written out then. I wonder that it creates such tspan occurrences, if the text isn't here inserted as seperate arranged characters at all.

☛ Affinity Designer 1.7.1 ◆ Affinity Photo 1.7.1 ◆ OSX El Capitan

Share this post

Link to post
Share on other sites

Meanwhile, can't it be all that parsed by a home made python script, even if a super ugly one ? (so you'd just run it for any file you'd export out of AD, might even run so that it process anything new that falls into certain folder(done that , too)). After all is a plain text file you are editing manually... I mean, I've done stuff like that for other plain text file formats (for 3D, etc) , and am by no means a programmer....  (an artist needing to automate some stuff, sometimes). I remember doing one of those in an afternoon.... Tho not sure how those tags and reformatting are, as not knowing to detail the needs, neither remembering right now the structure and how it was (have opened the SVGs from Designer only a few times). Any of you (non-staff forum members) actually knowing a bit of coding surely find it dumb easy.... 

I mean... might at least do your tedious task reduced by a 50%, if not a 100 %...

EDIT: Oh, wait, the actual graphic is a screen cap of a SVG, lol...Edit....no, a prettified version, oki.

Affinity Designer and Affinity Photo licenses, Windows 7, i7  860 (2009) 2.8 GHz,  8 GB RAM, GTX 1050 2 GB, HD 7200 RPM.  Wacom Intuos 4 XL.

Share this post

Link to post
Share on other sites

Surely Affinity can produce better formatted/prettier SVG code to make editing easier, It might be a good subject for a discussion i.e "improving svg code layout"

iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo, Publisher Beta, Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials Instagram & Flickr - Affinity Live 19th June 2019

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