As the web progresses into a future where screen densities are becoming increasingly uncertain, the need for pixel agnostic graphics is paramount. Blurry graphics really don’t cut the mustard.

I’ve been working with SVG a lot recently, trying to figure out the most robust way to use it. Unfortunately SVG browser support is fairly new, so workarounds are required to provide graceful fallbacks to raster.

My initial proposed solution ‘envelope window SVG’ used visibility: hidden on an image, and hooked in an SVG background onto the parent element. The major flaw to it being that two assets were download where only one was needed. Increased HTTP requests negatively impact performance, which forced me to continue my search. I eventually found SVGfall.

SVGfall is based on the Picturefill library by Scott Jehl. It uses three <div> elements with data-support attributes that are filtered, featured detected and converted into an image. For those browsers that have little or no JavaScript support, a fallback raster image wrapped in <noscript> tags is required at the end.

I’ve put together a small demo of it in action.