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 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.
- Joe Crawford @artlung