Support for CSS properties in SVG

[pepelsbey]

There are two ways of doing this:

First

1. Get a list of all possible CSS properties that could be applied to SVG
2. Inject them to existing dictionary
3. Make sure that Hayaku is available inside <style> elements in SVG

In this case all properties would be available in both scopes which could possibly make it harder to choose proper abbreviation (f for font or for fill?) and could also cause problems with CSS-only properties in SVG and vice versa. But this shouldn’t be a problem if you know what you’re doing.

Second

1. Get a list of all possible CSS properties that could be applied to SVG
2. Divide CSS and SVG properties between scopes (they would intersect)
3. Make sure that Hayaku is available inside <style> elements in SVG

In this case SVG-only properties would be available only inside SVG. Which could, for example, help to avoid misusing border instead of stroke, etc. But this would also make it impossible to write external CSS files for SVG but this is rather rare case.

I wish there could be a third way of doing this combining all good side of the first two. Maybe there is.

/cc @yoksel

[kizu]

I like the overall idea! The second variant is better, as there is not that big of an intersection between those styles available for HTML and for SVG, so we could introduce a new scope for SVG and then somehow reuse or just copy-and-paste those properties that are shared with the CSS.

[yoksel]

I think the second one is better.

[pepelsbey]

http://slides.com/sarasoueidan/styling-animating-svgs-with-css#/10

[kizu]

Yep, saw it live, thought about this issue too :)