Style Sheets

[deanm]

https://www.w3.org/TR/SVG/single-page.html#styling-StylingWithCSS

nanosvg already parses style attributes, but there are some programs (for example Adobe Illustrator) that produce SVGs with inline stylesheets.

There are lots of example in the SVG test suite, just search for "text/css", ex:

https://www.w3.org/Graphics/SVG/Test/20110816/svg/styling-class-01-f.svg

In general this means supporting parsing the style sheet, and also the "class" attribute and matching that back to the style sheet. I realize that in general is a pretty big task and basically requires a lot of the CSS infrastructure, but perhaps it would be good to have something basic working.

In my case I will have to at least implement simple class based rules to handle the SVGs from Illustrator.

[Azure-Zero]

I also would enjoy having CSS (internal or external) supported in nanosvg as most parsers out there have something about them that stops me from using them.

[memononen]

I wonder if it was possible to add some callbacks to allow external CSS parser? Maybe use Netsurf's libcss as an example? http://www.netsurf-browser.org/projects/libcss/

I think bare bones one would be possible too, but there are some black holes in CSS which can get complicated quickly.

Adding CSS support almost implies that you could change the style after parsing too. That in turn is pretty hard with the current setup, as I chose to "flatten" a lot to make it easy to use the data.

[Azure-Zero]

I think covering the bare bones CSS would go a long way to making nanosvg a lot better since more SVG editors are going with CSS styling in their exported files.

For CSS support I'd try a modular and upgradable route, so people could make their own CSS support format, and they might send it in to add to the collection.

For first stage of CSS support, I'd go with first come, first served. so if there is a style change after parsing, it's lost. Just to keep it simple until there is an outcry for it.

[memononen]

Could you provide a couple of simple examples from some commonly used editors? Just to see if they are much different than the one Dean linked.

On Tue, Feb 2, 2016 at 8:18 PM, Azure-Zero notifications@github.com wrote:

I think covering the bare bones CSS would go a long way to making nanosvg a lot better since more SVG editors are going with CSS styling in their exported files.

For CSS support I'd try a modular and upgradable route, so people could make their own CSS support format, and they might send it in to add to the collection.

For first stage of CSS support, I'd go with first come, first served. so if there is a style change after parsing, it's lost. Just to keep it simple until there is an outcry for it.

— Reply to this email directly or view it on GitHub https://github.com/memononen/nanosvg/issues/55#issuecomment-178732600.

[Azure-Zero]

Here are two samples of CSS from SVG files (one of them is from Adobe illustrator export). The first one should be easy to put in support for.

Sample1:

Sample2 :

[memononen]

And Illustrator uses just the class in the svg file?

[Azure-Zero]

Illustrator and Inkscape both use the "class" attribute instead of the "style" attribute to reference css in a path node.

[deanm]

I implemented something pretty simple that works for illustrator and should be pretty easy to make work for the examples above. Basically:

• Add a map of styles, class names -> strings to the parser
• Add a styleFlag to parser, and check for style in startElement.
• In the content callback, when styleFlag is set, parse out the class names and everything between { }
• Concat the strings between { } to the classname keyed style mapping.
• Add "class" to parseAttr. When a class is encountered, pull the CSS string for that classname, and pass it to parseStyle().

The basic idea of the above is like replacing all class="", with style="", with the style string coming from the style sheet. "Cascading" should be able to be handled just by concat'ing the strings as you parse. A class tag followed by a style tag should still have the style attribute take precedence, but this only works if the attributes are in that order.

It's not very robust, but it is pretty simple. It is implemented in JavaScript here:

https://github.com/deanm/nanosvgjs/blob/master/nanosvg.js

That doesn't support the comma separated classes like in the second sample above, but that would be pretty easy to add.

[olivierchatry]

I implemented that here : https://github.com/olivierchatry/svg-auto-viewbox/blob/master/Externals/nanosvg/nanosvg.h

Not sure how good it is concerning code quality etc. I can probably fork the rep amd make a pull request if it is of any interest.

[psivanov]

It would be really helpful if we can get some limited support of base inline styles like this one.

I am using nanosvg in production with user generated SVGs and many like above are just failing with no good way for us to recover.

Why not make a pull request, @olivierchatry ?

[tesch1]

This project is no longer being maintained - and there's not a replacement (repo / maintainer) yet... PRs are useless until someone has time to take over maintenance and look at them.

[psivanov]

I see... Well, I needed basic support for styles, which at least covers Adobe Illustrator exports.

So I made it work in a fork. I will create a PR for when someone has time to look at it.