Use CSS style for colors

[patrislav1]

This PR is trying to use CSS styles for recurring style attributes (primarily for colors) to 1) reduce SVG size and make it more readable and 2) make colors easily adjustable in the SVG code for all characters that use it. This is WIP, I thought I could get away with using a single set of color styles for both background and foreground, but turns out that setting the stroke color affect the text rendering.

[wader]

Nice, good idea. When messing around with these thing you really appreciate having good tests :) so please add more if you like

[wader]

Some possible things to look into:

• <g> can be used to inherit attributes and transformations
• <use> be be used to duplicate a <g>

But as you also mentioned i think we should probably stay away from too crazy tricks to keep the svg easily editable. For
example i wonder if the background could be a small embedded png that is stretched? :)

[patrislav1]

I've improved it a bit, can you check again? (Not sure if this needs additional tests..?)

I can already think of ways to make the file more compact with more use of <g>, also probably stuff like bold and italic can be pulled out to a class style definition, making the SVG code even more compact.

should we do that in separate PRs or right here? (I'm fine with merging this already if you're satisfied)

[wader]

Output looks good, can merge if you want 👍 had some minor code comments but no biggies.

For new features, regressions or some tricky edge cases i usually try to add some kind of test

[patrislav1]

:rocket: