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:

• Batik doesn't have an option for loading a script not included in the document and, to the best of my knowledge, Inkscape doesn't have an option for linking to a script, so it would have to be added by hand
• If someone happens across an image on the web, I want for them to see the colorized original. I don't even know if it is possible to know if Batik is being invoked as a viewer or a rasterizer from within a script
• I don't want to override all of the styles, only the colors. That is easy enough, but it means and further changes have to be made in code rather than CSS and I like to keep the elements requiring editing as simple as possible

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:

• group_inline_styles.xslt: When invoked with the washout parameter, a stylesheet is linked which will override the default colors
• washout.css: Simple CSS stylesheet to washout the colors
• Makefile: Sample Makefile of how to use these styles

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:

• All of the style declarations are in an embedded style block in image's header rather than being inline
• The view is controlled by a viewBox rather than the height and widthattributes (so the image will scale)

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

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

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

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.