This article was automatically recovered from archived versions of this site via the Wayback Machine. It is likely outdated or contains formatting errors, as it has not been reviewed.

Replace PNG with SVG

October 29, 2012

drupalomegasvg

I use this SCSS snippet in combination with Omega and Browserclass. It replaces the default logo of a Drupal theme with an SVG graphic file instead of serving hi-res bitmap images for retina displays. So you end up with 2 files instead of .. a dozen.

Of course, you can also use something like modernizr to get the same effect, but Browserclass is a lot smaller and sometimes it’s just convenient to target a specific browser version directly of which you know it always messes up something (I’m looking at you, IE). In combination with Omega’s responsive capabilities, you can aswell scale the SVG up a little bit for large screens while not haveing to replace it with a different graphics file.

SVG files can get large very fast if the graphics get more complex. So make sure your server compresses SVG files on the fly using something like mod_deflate. I’d recommend that for font files too, by the way. There’s a huge gain in filesize for those and people often overlook those two types of assets which are uncompressed by default.

SVG has its limits tho. But as long as the graphics only consist of a couple of shapes, some (vectorised) text and a few gradients, you’re good to go. Drop-shadows and all of that fancy shmancy stuff.. well, you’re on your own there. I try to avoid it. :-)