AD: SVG Exporter: options to add styling to <style> and add IDs to elements

[Friksel]

Rightnow exporting to SVG has all styles inline on all seperate svg-elements. And elements don't have classes or IDs.

Using SVGs on web and making interactive animations on a daily basis this way it's impossible to animate elements and use external stylesheets without having to manually add classes and IDs to each element and remlve all inline styling in a text-editor after each export. I don't like to say it, but that makes this workflow impossible to use.

 

 

Having to stick to inline styling inside the SVGs is another problem:

- These days inline-styling is a big nono and validators throw penalties if inline styline is being used. The preferred way is internal style department, or use with external stylesheets.

- A lot of layouts use the same styling on multiple elements. With inline styling all these styles got copied for all elements, resulting in a way larger SVG file then needed because of a lot of repetitive redundant data. This can easely be avoided by adding classes to the SVG elements and having one style-rule inside the general section for each different style. That makes the export a lot more efficient and makes it easier for developers like me to just copy the generated styles and move them to an external stylesheet if needed.

- When styling is in the general <style> tag inside the SVG, a developer only have to change 1 stylerule if something needs to be changed instead of having to change all objects having all the same inline-styles

- Because there are no classes nor IDs added to elements, we are unable to animate the elements with javascript, or again, we have to add IDs to all elements we want to animate each time after an export... 

 

A little bit like the Adobe Illustrator advanced settings offer, but that could even be improved to keep the SVG output as small as possible:

 

My suggestion would be to add this to the SVG exporter settings:

- A checkbox to add IDs to SVG elements where the layer-name starts with an asterix ('#'), followed by the name of the layer/curve.
  That way we can decide wich elements get IDs so we can address these elements later with Javascript to animate and so on.

  And with this we also prevent adding IDs to all elements in the SVG (resulting in a large SVG file with a lot of unused, redundant IDs).
  And when no # is add to any layer, no IDs are being written to the SVG. So full control here I'd say.

- An option to choose one of the following for the SVG Export:

      - Use inline styles

      - Put styling inside <style> tag (recommended - mostly resulting in smaller files and less redundancy)
      (Perhaps to be complete even a:

      - Put styling inside svg attributes
      (but not my taste  ) )
 

When a user picks 'Put styling inside <style> tag' the elements get a class attached with the styling in the general <style> tag inside the svg.

 

Long story short: for real / advanced usage of SVG on the web for web development, interactivity and animations (by css and javascript), these options are indespensable!
It would be very much appreciated if Affinity developers could look into this! Thanks a lot!