| 26 Apr 03:05 2008

Using SVG from CSS

I wasn't sure whether to blog about this but I thought I might as well
start a little conversation here first...

People are proposing all sorts of extensions to CSS for fancy
presentational effects --- gradients, canvas backgrounds, masks, and
so on. I think this is unwieldy and duplication of effort. Instead I'd
just like the SVG CSS properties 'filter', 'mask', 'clip-path', and
'fill' to Just Work on non-SVG content --- making the full power of
SVG paint servers and effects available to HTML content. And I'd like
a way to specify any element as an 'image' source for CSS 'background'
and other properties ... could be as simple as url(#element).

The biggest problem with this is making the necessary SVG fragments
available in an HTML document. Using HTML5's proposed parsing
extensions, or just XHTML, you could including the SVG fragments in
the underlying document, but that's clumsy if you're using the same
stylesheet in many documents.

A better approach would be to give the stylesheet an accompanying .svg
file and use external references to that SVG file. So foo.css would
contain "filter:url(foo.svg#bar)". That would work pretty well if we
can load the file once per base document and resolve all references to
foo.svg to that same loaded document. Unfortunately the spec doesn't say anything
about this but perhaps that just means we can interpret it the way we

An additional issue is that we'd like to be able to manipulate the
contents of foo.svg using the DOM or declarative animation. So one
random idea is to expose a DOM API, analogous to the CSSOM stylesheet
(Continue reading)