Super Tiny Website Logos in SVG
By @edent
· NaBloPoMo svg · 25 comments · 250 words · read ~50,064 times.
You may not realise it, but bandwidth is expensive. It costs you time, money, and battery power whenever you download a file larger than it needs to be.
That's why I've become a little bit obsessed with SVG - Scalable Vector Graphics. They're the closest thing to magic that the web has when it comes to image compression. Let me show you what I mean.
This is the standard Twitter Logo. It's 512 * 512 pixels and, even with hefty PNG compression, weighs in at around 20KB.
Here's the same logo rendered as an SVG. Because it is a vector graphic it can be magnified infinitely without any loss of fidelity.
The uncompressed SVG is a mere 425 Bytes. Not a typo. You could fit over 3,000 of these images on a floppy disk.
That's why I have released SuperTinyIcons on GitHub. Eighty of the web's most popular logos - each image is under 1KB.
These files are suitable for use on the web - just use <img src=".... They are supported by all popular browsers. I've also converted them to Android Vector Drawables, so they can be incorporated into your apps.
I've released them as MIT licensed files - although you should check the original images' licences. Some of these logos may be trademarked.
Mastodon
Twitter
Facebook
LinkedIn
Reddit
HackerNews
Lobsters
Pocket
WhatsApp
Telegram
Meg says:
Lovely. The Web needs more svg.
Please Sir, what’s a “floppy disk”?
Michael says:
I guess you are already a cd-rom user... but you should know where we're coming from..
RIP has come back from the dead! pines for ANSI and high ASCII symbols
Haven't had the time...but how do these stack against fa fa fonts...size wise?
@edent says:
A quick look shows that their Twitter icon is 635 bytes. My icon is a mere 429 bytes.
People should submit patches if they can make identical versions that compress even better - you could imagine a leaderboard for who submits the most accepted patches.
@edent says:
Hi Stu, pull request welcome - I've already had a few people submit much smaller icons.
Anonymous says:
What about a reference PNG for each one, and CI that checked each pull request to make sure the rendering matched that PNG?
Something like: https://www.argos-ci.com/ ? (open-source automated visual diffing).
While not a coder I appreciate what you have done.
A mashup of this plus https://blog.clearbit.com/logo/ would be great.
Mohsin Shafique says:
That's really great! What tool did you use to author them?
@edent says:
A mixture of Inkscape, text editor, and SVGO.
Judy Gunnery says:
I have just found a use for these .svg files. Using an image for crafting on electronic cutting machines is much easier and more efficient with .svg and virtually identical. I am new to the crafting world, but came into the machine world when computers were still reading paper tape. Geez, talk about floppy discs, we used 8 inch floppies. They were made of magnetic medianand protected by mylar.
Old lady geek
Detlev says:
You mention battery power, but wouldn’t the rendering of the SVG use more power than to download and display the prerendered PNG file?
jrg says:
Rendering an SVG would most likely use less battery power. Rendering an SVG can be done mostly on the GPU, whereas decoding a PNG would require heavy CPU usage.
MH Xion says:
I think it’s worth mentioning, SVG compression ratio depends on the variations of color in an image. For example the above Twitter icon has only 2 different colors, using SVG is gonna save you from lots of pain. If it had more than 2 colors for example 1000 different colors (like our regular captured picture has) then the SVG format would have taken a way more space than PNG, JPG. It’s really great to use SVG when it comes to icon, logo, and simple illustration.
Meg says:
The author did title it as "Super Tiny Website Logos in SVG"
I would like lesser known sites added to the tiny website logo. Like Gab/hooktv/voat a nintendo friend code and so on. I went a head and made my own just a plain 'FC' Logo in blue that's svg. But honestly this idea is a lot better. My friend who helped made my site couldn't find stuff like a gamepad or something more general for like psn and so on.
@edent says:
Hi Patrick - if you can find good vector logos for them, I'll certainly consider it. I use "The Noun Project" as a good source of general icons. See https://thenounproject.com/search/?q=gamepad
I could always make them or convert and edit them in gimp for you. If your willing to accept that.
@edent says:
Sure! You might find Inkscape better for creating vector images. Send them as pull requests on GitHub.
Below 200 bytes? 🥰
This Article was mentioned on lobste.rs