"little" image upsizing with SVG

I have a blog post from 2008 about Gmail tags, or rather one tag. Bozo. It's got a featured image of gmail-bozo-tag.gif, which looks like this:

But in an img tag, I set the attributes to a larger size, because I want to feature it. In browsers like Google Chrome it renders blurry.

Terrible. (this has nagged me for years)

Current versions of Firefox and Internet Explorer do the same "fuzzifying." I don't have any idea when this started. But I'm pretty sure at some point in the ancient history of the web, our web browsers did not do this.

Am I misremembering? Dunno.

Today, Eric Meyer tweeted a link to a tool he built, flaming-shame.

I was able to quickly run the tool on my server which runs PHP, and I soon was able to produce source code for an SVG file of my image.

And it looks great!

Though I did have to modify the produced SVG a bit. I replaced

<svg>

with

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 35 18">

Those attributes allow the SVG file to be used as the src attribute of an img tag. This file resizes perfectly because it's a vector.

Thanks Eric!

- Joe Crawford @artlung