I am working to create an SVG web app and I have around 50 external icons that the app uses. It would be great if I could put all of these icons into one spritemap like with css sprites. I can't think of a way to do this using SVG off the top of my head so if anyone has suggestions please post. The way I envisioned is to have a 20x20px square (for example) that contains the spritemap image and moves the correct icon into the 20x20 square, just like css sprites.

In case some aren't familiar with css sprites, I just want to make it so a shape has a background image that can be positioned in JavaScript. The background image would only be visible within the shape and the rest of it cut off, thus allowing the background image (sprite map) to be positioned such that only the desired icon is shown.

Here is an example of a spritemap:



Thanks!

Without having done this myself I think you need some combination of viewboxes/viewports and lining into specific portions of svg files.
I am going to link to the svg spec because I don't know of any other resources.... http://www.w3.org/TR/SVG/linking.html#LinksIntoSVG

Scraxch that; tht is how it is meant to work - it looks like most browsers don't support this properly...

It may be possible by using diffrent layers and javascript to show/hide each layer; eg something like http://www.openclipart.org/people/tom/m ... test_1.svg

I don't understand the layer idea. Wouldn't I still have to have all the images as separate files for that?

Damn! I thought I had this figured out a minute ago but I've hit a wall again. I tried making a pattern out of the spritemap and then using it as the fill of a rect element. It shows up fine but the pattern coordinates apply to the entire svg space and thus you cannot position the spritemap for more than one icon.

I created a quick test showing that the pattern continues into other elements instead of restarting the pattern for each, link is below. Is there a way I can have the pattern start at (0,0) for any element that I put it in? I thought changing the patternUnits to objectBoundingBox would work but it just makes the pattern blank...

EDIT::Link Removed as it no longer exists

I did a little test.

If you set the pattern origin to 0,0 and then draw the original shape (rectangle) at the appropriate location on the spritemap pattern, then apply a transform/translate attribute to the shape to position it, you get the expected results. To change the visible shape of the spritemap in an object both the x and y as well as the transform both need to be changed at the same time.

-Rob A>

Hmmm interesting. So you're saying that if I position the element over the desired icon in the spritemap pattern and then translate it elsewhere, it will "move" the icon with it? Genius!

I'll give it a try and post the results.

After testing myself, this is definitely the method I will use for mapping these sprites.

Here is a working example:

http://static.dorshnik.com/wow/test.svg