Super Tiny Website Logos in SVG

@edent NaBloPoMo svg · 24 comments · 200 words · Viewed ~51,073 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.

SuperTinyIcons on GitHub

24 thoughts on “Super Tiny Website Logos in SVG”

2017-11-26 15:08

Meg says:

Lovely. The Web needs more svg.
Reply
2017-11-26 15:40

John M Howitt says:

Please Sir, what’s a “floppy disk”?
Reply
1. 2017-11-26 17:53
  
  Michael says:
  
  I guess you are already a cd-rom user... but you should know where we're coming from..
  Reply
2017-11-26 17:14

circuit_breaker says:

RIP has come back from the dead! pines for ANSI and high ASCII symbols
Reply
2017-11-26 18:33

Mike says:

Haven't had the time...but how do these stack against fa fa fonts...size wise?
Reply
1. 2017-11-26 18:45
  
  @edent says:
  
  A quick look shows that their Twitter icon is 635 bytes. My icon is a mere 429 bytes.
  Reply
2017-11-26 19:34

Stu says:

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.
Reply
1. 2017-11-26 20:31
  
  @edent says:
  
  Hi Stu, pull request welcome - I've already had a few people submit much smaller icons.
  Reply
  1. 2017-11-27 02:59
    
    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?
    Reply
    1. 2017-11-27 12:25
      
      Matt says:
      
      Something like: https://www.argos-ci.com/ ? (open-source automated visual diffing).
      Reply
2017-11-27 01:09

Jonathan says:

While not a coder I appreciate what you have done.
A mashup of this plus https://blog.clearbit.com/logo/ would be great.
Reply
2017-11-27 03:23

Mohsin Shafique says:

That's really great! What tool did you use to author them?
Reply
1. 2017-11-27 07:30
  
  @edent says:
  
  A mixture of Inkscape, text editor, and SVGO.
  Reply
2017-11-27 05:39

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
Reply
2017-11-27 08:12

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?
Reply
1. 2017-11-27 18:35
  
  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.
  Reply
2017-11-27 10:03

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.
Reply
1. 2017-11-27 17:26
  
  Meg says:
  
  The author did title it as "Super Tiny Website Logos in SVG"
  Reply
2018-01-01 17:32

Patrick says:

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.
Reply
1. 2018-01-01 20:11
  
  @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
  Reply
  1. 2018-01-02 17:42
    
    Patrick says:
    
    I could always make them or convert and edit them in gimp for you. If your willing to accept that.
    Reply
    1. 2018-01-02 20:24
      
      @edent says:
      
      Sure! You might find Inkscape better for creating vector images. Send them as pull requests on GitHub.
      Reply
2021-11-26 07:04

Gustav Gatu said on twitter.com:

Below 200 bytes? 🥰
Reply | Reply to original comment on twitter.com