02 December, 2012
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
<noscript> tags is required at the end.
I’ve put together a small demo of it in action.