Washing Out SVGs

I have a site where I want to use the effect of a grayed out image that is colored when hovered over. The images are simple ones I did in Inkscape. Theoretically, all I need to do is override the CSS styles to pull out all the colors and soften the lines.

Batik has support for a user stylesheet. The problem is that the styles in the document are all inline styles and there's no easy way to override them.

One potential solution is to write a javascript to go through the document after it is loaded and pull out the inline styles. It would be relatively easy to do, but there are a couple problems:

A different tact is to simply create a new file with all of the style declarations grouped into a style block. They would then fall under normal inheritance rules.

Programatically, this shouldn't be a terrible difficult program to write. It could be done procedurally in anything with a DOM implementation, but I am going to use XSLT. That, combined with a new style should solve the problem:

So, you start off with a svg like this one:

Then you run:

xsltproc group_inline_styles.xslt book.svg > book.embedded-style.svg

This image doesn't look different, but the structure is different in two important ways:

Inline styles cannot be overridden by document ones. To rasterize the document do:

java -jar ~/bin/batik-1.6/batik-rasterizer.jar -cssUser file://$(pwd)/washout.css -d book.embedded-washout.png -w 210 -h 155 book.embedded-style.svg

Washed-out Book

Unfortunately, Batik ignores the viewBox and always outputs a square image when working with a height and width of 100%. Additionally, the user defined style doesn't seem to be having any effect. Perhaps embedded stylesheets take priority over external styles?

xsltproc -stringparam style_filename book.group.css group_inline_styles.xslt book.svg > book.external-style.svg

This version is like the embedded one except the styles are put in an external file: book.group.css. The rasterizing process is the same though:

java -jar ~/bin/batik-1.6/batik-rasterizer.jar -cssUser file://$(pwd)/washout.css -d book.external-washout.png -w 210 -h 155 book.external-style.svg

Washed-out Book

That also doesn't work. How about with the washout style linked to from within the document?

xsltproc -stringparam washout true group_inline_styles.xslt book.svg > book.linked-style.svg

Which, when rasterized, produces:

java -jar ~/bin/batik-1.6/batik-rasterizer.jar -d book.linked-washout.png -w 210 -h 155 book.linked-style.svg

Washed-out Book

So, apparently the cssUser argument just doesn't work? I get the same result when working with cssAlternate. Further testing shows that it is only the ! important declarations that seem not to take effect.

Copies of all these commands are available in the Makefile for this page.