"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:

bozo

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.

Fuzzy! Uck!

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.

bozo

Thanks Eric!

- Joe Crawford @artlung