Why can't CSS Sprites handle vectors?

Question

Almost all the documentation available either says that "sprites are bitmaps" or that "css sprites must be bitmaps". Is there a specific reason for this? Is it, in fact possible to create a css sprite sheet with .SVGs? If it is possible is it a good idea, and is the SVG format supported on all browsers?

I'm creating a HTML5 game with a strong minimalist art style, using elements of European folklore. I don't need vector images per se, but I'd prefer the game was as responsive as possible to improve UX and to allow gameplay across different devices.

An example character. As you can see, there is no fine detail that would be better represented with a raster image.

Answer 1

If you’re familiar with CSS spriting,it can be done the same way with SVGs. Unlike the icon fonts technique, you’re not bound to one color.

You can use gradients, clipping masks, and transparencies while still keeping your mark-up and CSS clean.

Chrome supports SVG with a few minor bugs and so does the latest Mozilla browser these are the ones that most people generally use.

SVG sprite sheets can be used as background for CSS and to use it is a pretty good idea. You will find many websites and blogs that show you how to exactly use it that way.