SVG & Spritesheets

Question

Is this combination possible? I have a retro-style spritesheet, however I'd like to use SVG with it in order to apply some effects such as shadows, outlines, and other things. Don't question it.

I know canvas is an alternative, however for this project I'd prefer to use SVG. One major issue is in the way, however: taking individual sprites from a spritesheet. Additionally, I use 1x1 pixel sprites but enlarge the spritesheet to make them 6x6 via hidden canvas, so I'm also working with an image element as opposed to linking to an image outside of the page.

Is it possible to choose regions of the image to use in SVG? The SVG image element doesn't appear to offer such options.

Answer 1

You can use a clipping path with your image, clipping exactly to the contents you want. For example:
http://phrogz.net/svg/image-spritesheet.svg
If you're only targeting Firefox, you can instead use: image-spritesheet-simple.svg

Alternatively, you can place your <image> in a new <svg> element inside your SVG. The inner <svg> establishes a new viewport, and you can then use the viewBox of that to only display a rectangular region from your image (more like a normal sprite sheet).