Exporting for Web Workflow Issues

[Taylor]

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:

[Gabe]

Hi @Taylor,

Welcome to the forums. 

I suggest you our latest beta: https://forum.affinity.serif.com/index.php?/forum/33-designer-beta-on-windows/ If it's still the same, I will move this to feature requests, as we have no other tools in place for those at the moment. 

Thanks,

Gabe. 

[v_kyr]

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.

[SrPx]

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.

[firstdefence]

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"