Store multiple elements in SVG & use them as CSS backgrounds?

I'm wondering if I can create multiple "brushes" in a single SVG file and use them thoughout my CSS.

Right now I have a single SVG file that has a gradient stored in the "defs" and a single rectangle that draws it. Then I use this SVG file as a background image in my CSS. It works well but I'd rather not have a million separate SVG files. I'd like to combine like "brushes" together in a single SVG file something like CSS sprites or XAML is capable of.

Is there a way to do this? If so what's the syntax to specify for the CSS background image which SVG element from the svg file to use?

Thanks for any help.

In theory yes, that should be possible. It's not yet fully defined in a w3c spec though and the implementations do differ at this stage.

Note that svg itself allows a special fragment syntax, so in theory you should be able to link to different views of the same svg file. That could be used to do CSS/SVG sprites.

Linking directly to the id of a nested svg fragment (or to any other element inside the svg) is something that would need to be further specified.

Assuming that linking with fragments from a CSS background property works, then a possibility if you use XHTML (serving the resulting file as application/xhtml+xml) is to just include the svg resources inline in the main document, eliminating the need for many separate files. This can be done as a pre-publishing buildstep if you wish to keep the svgs separate for editing. Another possibility is to use data uris.

I'm also seeking for the same, and here are the pointers I could find:

• 17.3 Linking into SVG content: IRI fragments and SVG views (w3.org)
• SVG Stacks (simurai.com)
• Can I use SVG fragment identifiers? (caniuse.com)
• Better SVG Sprites With Fragment Identifiers (broken-links.com)

According to caniuse.com, there is an issue with browser support, but that does not prevent you to try and observe future browser evolution (in the hope a future day they will all support this obvious feature).