"Little" image upsizing with SVG
The Problem with putting tiny images in an img tag and making them larger
June 2015
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, called "flaming-shame".
It can convert a bitmap image to a vector SVG, one block at a time.
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.com