
Super Tiny Website Logos in SVG - edent
https://shkspr.mobi/blog/2017/11/super-tiny-website-logos-in-svg/
======
kekub
I have been using [https://simpleicons.org](https://simpleicons.org) for a
while now. It is super light and looks great. License is CC0. Although I
prefer inlining the icons over using <img> tags.

~~~
everdev
Is there an easy way to generate SVG icons from image files (.png, .jpg,
etc.)? Or are each of these SVG icons created by hand?

~~~
jankovicsandras
ImageTracer is a simple raster image tracer and vectorizer that outputs SVG,
100% free, Public Domain.

Available in JavaScript (works both in the browser and with Node.js),
"desktop" Java and "Android" Java:

[https://github.com/jankovicsandras/imagetracerjs](https://github.com/jankovicsandras/imagetracerjs)

[https://github.com/jankovicsandras/imagetracerjava](https://github.com/jankovicsandras/imagetracerjava)

[https://github.com/jankovicsandras/imagetracerandroid](https://github.com/jankovicsandras/imagetracerandroid)

You can use svgo to optimize the SVG afterwards:
[https://github.com/svg/svgo](https://github.com/svg/svgo)

------
teej
In case anyone else was suspicious of the 20k file size for a 512x512 PNG with
essentially two colors - it's way off. I dropped it into Photoshop and
exported as PNG and it spit out an identical file that weighs in at 6k.

~~~
dawnerd
And if you run it through [https://tinypng.com](https://tinypng.com) it should
get down even smaller. PNG compresses surprisingly well when it’s basically
two colors + alpha.

~~~
vladdanilov

      Photoshop: 6 705 bytes, 128 colors, 1-bit alpha only
      TinyPNG: 6 179 bytes, 92 colors
      Optimage: 5 761 bytes, 154 colors
      TinyPNG + Optimage (lossless): 5 226 bytes, 92 colors
    

[https://imgur.com/a/X9DnJ](https://imgur.com/a/X9DnJ)

TinyPNG tends to use fewer colors. But its compressor is pretty suboptimal. I
could reduce the image further by 15.4% with the tool I'm making
([http://getoptimage.com](http://getoptimage.com)).

~~~
mrb
3545 bytes: [https://i.imgur.com/dHIaRh1.png](https://i.imgur.com/dHIaRh1.png)
Used Gimp to convert to 4-bit paletted colormap, and processed through
optipng.

The original PNG icon was very clearly suboptimal at 20 225 bytes...

~~~
ricardobeat
Imgur converts everything both of you posted to JPEG...

~~~
icebraining
What do you mean? It's serving me a PNG image.

~~~
mkl
Are you sure? Zooming in here I see JPEG artifacts. Imgur also often lies
about the image format in the URL.

~~~
CapacitorSet
ImageMagick's `identify` claims it's a PNG:

    
    
        $ curl -OL https://i.imgur.com/dHIaRh1.png
        $ identify dHIaRh1.png
        dHIaRh1.png PNG 512x512 512x512+0+0 8-bit sRGB 3545B 0.000u 0:00.000

~~~
mkl
Yes, I can reproduce that. I get served different versions depending on
device/browser, and on my phone I got a 7883 byte JPEG!

------
escape_goat
A lot of these are logos that I had assumed to be registered trademarks. As
such, they would only be usable under the terms of a licensing agreement with
the owning company, terms which I had assumed would be pretty anal-retentive
regarding the exact details of the representation. IIRC, Facebook has a
specific art package with specific image files that one is suppose to use, and
no other.

On the one hand, this is pretty common knowledge. On the other hand, none of
the responses so far have brought it up, and the logo website itself seems to
think that the cited sources can license the use of the artwork in question. I
do not quite know what to make of this.

~~~
matthewmacleod
What you have said is simultaneously completely true and totally pointless.

Yeah, we all know that brands have tediously anal rules about usage of their
logos in particular. In practice, so long as you aren’t obviously abusing it,
nobody is going to care. Have you seen some of the stuff what people do with
social media logos??

------
tlb
Just to pick on the one I know best, the Y Combinator logo is way off. The
corners shouldn't be rounded, and the Y is too big and its top branches are
too thick.

Correct version: [http://www.ycombinator.com/images/ycombinator-logo-
fb889e2e....](http://www.ycombinator.com/images/ycombinator-logo-fb889e2e.png)
this project:
[https://camo.githubusercontent.com/08ae881e8ce6d8f2278fa20d7...](https://camo.githubusercontent.com/08ae881e8ce6d8f2278fa20d7ef2c3ef61c64361/68747470733a2f2f6564656e742e6769746875622e696f2f537570657254696e7949636f6e732f74696e792f6861636b65726e6577732e737667)

------
vortico
Amazing! With SVG being supported on all browsers you should care about today,
it obsoletes icon fonts, which require the entire icon set to be downloaded.

Anyone know of a FontAwesome-like project, ideally with a CDN, that serves SVG
icons like Font Awesome has so including them in a website is easy and
compact?

~~~
michaelbuckbee
No CDN, but there's multiple repos of people taking the FontAwesome icons and
converting them over to SVG.

Here's the one I used: [https://github.com/encharm/Font-Awesome-SVG-
PNG](https://github.com/encharm/Font-Awesome-SVG-PNG)

Also, the new "Font Awesome Pro" comes with all icons as SVG out of the box -
[https://fontawesome.com/](https://fontawesome.com/)

Last, one annoyance (in the midst of many benefits) of using SVG instead of
fonts as icons is that you can't change their color via CSS if you're
including them via <code>img src='file.svg'</code>

So I use BoxySVG. Boxy is to Illustrator as Acorn or Pixelmator are to
Photoshop. A tightly focused editor that lets you do simple things (like edit
colors) very rapidly and doesn't bog you down with a ton of extraneous
features.

[https://boxy-svg.com/](https://boxy-svg.com/)

~~~
MayeulC
I am pretty sure you can change a lot of SVG properties trough CSS (use
"currentColor" to change the color, for example).

There was a discussion about [http://slides.com/sdrasner/svg-can-do-
that/](http://slides.com/sdrasner/svg-can-do-that/) some time ago, which gives
some nice SVG styling examples.

~~~
michaelbuckbee
So the distinction is inlining SVGs vs referring to them like you would a png
with an img src=filepath.svg|png in your HTML.

It's handy to just treat them as you would images, but you lose some
flexibility wrt being able to manipulate them via CSS b/c the browser now
"thinks" of them like an image.

This SO post has a clever workaround (with I'm sure more caveats wrt
performance, etc) that will auto-inline your svgs that you need to manipulate
so you can get a best of both worlds type situation going.

[https://stackoverflow.com/questions/24933430/img-src-svg-
cha...](https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-
fill-color)

------
darekkay
GitHub posted a write-up [0] on how they switched from icon fonts to SVG
icons. It's worth a read.

[0] [https://github.com/blog/2112-delivering-octicons-with-
svg](https://github.com/blog/2112-delivering-octicons-with-svg)

------
helenius
Remember to always (every time) set width/height for the <img> tag, otherwise
it will fill the entire screen/container.

~~~
ozaark
Yes! Loading many sites without width/height set on mobile connections display
a horrible jitter with logos and social icons polluting the entire screen
initially.

------
jordache
At what point does using a vector SVG is worse than raster image? Level of
image complexit, requiring a ton of path elements?

the Twitter logo can be create in basically 2 path elements.

What if my logo is much more complex? Is there a threshold at the complexity
of my image results in an SVG payload > than a properly compressed raster
image?

~~~
agumonkey
That's my issue with the svg reflex, re-rendering complex geometry is more
demanding than byte copy. That said
[https://edent.github.io/SuperTinyIcons/tiny/twitter.svg](https://edent.github.io/SuperTinyIcons/tiny/twitter.svg)
is really really really simple. I had no idea svg.fill could encode such
things, and expected a bad mix of overlapping ovals to create the
illustration.

Not bad

~~~
edent
I have made a "circles only" version of the Twitter logo - it's at
[https://shkspr.mobi/blog/2017/05/the-twitter-logo-as-svg-
cir...](https://shkspr.mobi/blog/2017/05/the-twitter-logo-as-svg-circles/)

It's a bit of a silly way to do it - and is probably more complex to render.

~~~
agumonkey
but easier to understand :)

------
chrisweekly
Slight tangent, but for anyone coming late to the party, here’s a sampling of
why SVG matters:

[http://slides.com/sdrasner/svg-can-do-that#/](http://slides.com/sdrasner/svg-
can-do-that#/)

~~~
Mindless2112
I'd say that's a sampling of how SVG went wrong.

What we wanted was a vector image format; what we got was PowerPoint.

~~~
CamperBob2
I don't understand this argument. The ability to do more complex stuff doesn't
alter the fact that SVG is a perfectly reasonable vector image format.

------
freshyill
They aren't _all_ under 1KB, but there a few repos on GitHub hosting all of
the Font Awesome icons as SVG.

Also, if you can avoid it, don't use <img src… to display SVG images, as the
article suggests. By using <svg… directly, you avoid extra requests, you gain
the ability to manipulate them directly in the DOM, and to restyle them.

[https://github.com/ivanvotti/font-awesome-
svg/tree/master/SV...](https://github.com/ivanvotti/font-awesome-
svg/tree/master/SVG)

~~~
grenoire
Unfortunately you cannot reuse the icons that way, which does end up being
wasteful unless you use compression.

~~~
thinkloop
You can reuse inline icons with JS - for example if you made a react component
of it.

------
aw3c2
Very cool! I would advise to try minifying with svgomg, some icons seem to
benefit. Eg bitbucket.svg can be reduced by 20% without any visual change.

~~~
edent
Most of them were already minimised with SVGO and svgcleaner. If you can make
them smaller - I'd love a pull request :-)

~~~
baybal2
Do you care about readability? Does ungzipped size counts or you assume that
users will be using gzip?

Here is DO logo that you can gzip down to 221b

<svg role="img" aria-label="DigitalOcean" viewBox="0 0 512 512"
xmlns="[http://www.w3.org/2000/svg"](http://www.w3.org/2000/svg")
fill="#0080ff"> <rect height="512" rx="15%" width="512" fill="#fff"/> <path
d="M256,391v85a220,220 0 1 0 -220,-220h85a135,135 0 1 1 135,135
H51v-55h55v120h65V306h85z"/> </svg>

Do you think it is ok to pull out newlines?

~~~
edent
In the readme, I've said that I want to keep newlines for readability. That
helps with people learning about SVG.

I'm not fussed about compressed size - but I'd certainly welcome a Pull
Request if you've managed to shrink that icon.

~~~
Bromskloss
How about keeping readable versions in the repository, along with a script
that compresses them? The compressed ones could be automatically served on a
separate site.

~~~
edent
Could be fun! Please send a pull request.

------
phaed
> You could fit over 3,000 of these images on a floppy disk.

So small it will take you 20 seconds to count on an Abacus.

~~~
tibu
If you find a floppy disk or drive at all nearby :D

------
vanderZwan
I'm still a bit sad that Raphaël.js never _quite_ caught on[0]. Same for its
successor Snap[1]. I guess the main reason is that SVGs themselves weren't
quite popular (and I assume there were also a few bugs) and take a proper
illustrator to draw, compared to the ease of fetching JPG assets off the
internet.

[0]
[http://dmitrybaranovskiy.github.io/raphael/](http://dmitrybaranovskiy.github.io/raphael/)

[1] [http://snapsvg.io/](http://snapsvg.io/)

------
mgalka
Really cool. I've always wondered why nobody was doing this. Just about every
website in the world could benefit from it. Nice work!

------
userbinator
I bet many of these would be even smaller in SWF, since that's a very
efficient (bit-packed, and then compressed) binary format specifically
designed for small filesize, as opposed to the textual XML of SVG (although
SVG is not really "XML-ish" in the sense that path data is still a list of
points, and not one-element-per-point.)

~~~
CodeWriter23
I'd rather trade a little bandwidth for the increased security of not running
Flash in my browser.

------
firefoxd
Where do we find a good SVG editor? That might be the reason the mass hasn't
switched to svg.

~~~
arca_vorago
Perhaps Inkscape?

~~~
IshKebab
Inkscape is ok. It has serious issues though - pretty terrible performance,
confusing UI, still requires X11 on Mac, etc. Probably still the best free SVG
editor but I'm not sure I'd go so far as to call it good.

~~~
Bromskloss
> confusing UI

Anything particular you have in mind?

~~~
CamperBob2
Most of the time, when I run InkScape to edit an existing .SVG, it's because I
want to just select and drag a few vector endpoints a bit to one side or the
other to make minor tweaks. I'd venture that's true for most users. However,
it doesn't seem to be the default behavior. I always have to remember how to
get into the right selection mode, because the authors seem to think I most
likely want to drag the entire image around. Why I would want to do that, I
can't imagine, but that's how it works.

That's a problem for many common actions -- for instance, I normally want to
resize the view box to enclose the content tightly before saving an edited
file, so why is that common action buried multiple layers deep in the UI?
_File- >Document Properties->Page->Custom size->Resize page to content->Resize
page to drawing or selection->Seriously?_ It's almost easier to do this in a
text editor.

Finally, people who write apps that don't remember their previous desktop
window size and position, but that instead auto-size themselves to cover the
entire screen every time they're launched, should die in a grease fire.
Unnecessarily-aggressive hyperbole aside, this kind of obvious forehead-
slapping behavior is never good news because it means that the maintainers
don't use their own app.

All that aside, InkScape is really a very powerful application that could be a
lot harder to use. A great deal of hard work has clearly gone into it, and at
the end of the day it _is_ free software, so it's hard to complain without
seeming ungracious. If it weren't such a great app, it wouldn't be worth
criticizing at all.

~~~
Bromskloss
Thanks for sharing your comments. That's interesting.

> the authors seem to think I most likely want to drag the entire image
> around.

I don't think that is the default, unless the whole image happens to have been
grouped into a single element, which might of course be the case.

------
londons_explore
When most webpages have a megabyte or more of javascript libraries, having a
20kb twitter icon which is probably cached doesn't sound bad really.

------
foxhop
I wish I could submit my SVG, its not a hugely popular service but it seems
like this idea could be expanded.

------
amelius
But _why_ , when I zoom in with my browser (using Ctrl-+) on that page, the
icons don't look sharp?

EDIT: I mean the table.

~~~
dave5104
The second Twitter icon (which is an SVG) looks very sharp when zoomed in. The
table of other icons is a screenshot, not in SVG, so those won't look sharp
when zooming in.

------
abritinthebay
I love that people are rediscovering SVG

I hope this gathers stream and forces Google (and others, but especially
Google) to fix the bugs they have in the format

~~~
stinky613
Could you elaborate on the bugs in SVG? Are there any usability issues beyond
the bugs? I tried some cursory googling 'why not to use svg', 'svg bugs', etc
and didn't really find any common/recurring.

~~~
spiralganglion
Historically, the SVG-related systems in most browsers haven't seen a lot of
love, so it's lagged behind other web technologies. This seems to be getting
better — I know Safari just landed a nice 3x performance improvement to one of
the SVG filters.

Here's a handful of issues that I still encounter, due to cross-browser
differences.

    
    
      * You can't use the full range of CSS3 colors.
      * You can't set certain style properties via CSS (requiring the use of attributes).
      * You can't use self-closing tags for certain elements.
      * Differing behaviour when you set an attribute to "null" (which is fine, it's just a gotcha)
    

SVG performance also varies wildly, more so than JS perf, HTML DOM perf, or
CSS perf. This seems to correlate with the visual quality of the rendered
result — Chrome is the fastest but has excessive smoothing, poor sampling of
scaled images, etc; Safari is the slowest but produces the cleanest result.

------
mozumder
Make sure you inline these in your HTML directly so you don't add an
additional 1-2KB (or more) in headers for each access.

------
ss64
Someone should build a web service for delivering these social icons. They
could place a random selection of 3 or 4 popular social icons on the page, and
then, like AdSense the social sites could pay to get an increased number of
placements, with a percentage paid back to the site owner.

