Switching CSS in SVG

by David Jones

SVG, stands for Scalable Vector Graphics, is a way of making graphics from lines and curves and stuff (as opposed to pixels, which is how JPEG and PNG and things work).

It's great. I use Inkscape to maintain a scale drawing of my back garden in SVG:

That version is in colour.

For planning the garden, i like to print out the scale drawing and draw on it with pen and pencil. But for that, a black and white outline is more useful.

I'd like to be able to define a second CSS stylesheet, and switch between the two. Fun fact: you can style SVG using CSS, just like you can HTML. Fun fun fact: this works because HTML and SVG are both XML based.

I didn't find a good way to do this, but I did find a way.

I can create an HTML page which includes the SVG via an OBJECT tag. I can then run some JavaScript which fetches the DOM on the SVG object and modifies the SVG to add a style element.

Here is the vector outline version.