
Tiny Social Icons – Miniscule SVG versions of social app logos - edent
https://github.com/edent/SuperTinySocialIcons/
======
throwaway2016a
Hopefully saving someone a search...

SVG browser support:
[http://caniuse.com/#search=svg](http://caniuse.com/#search=svg)

Pretty much everything of any significance supports it except IE 8 which has
0.3% market share and is no longer supported by Microsoft.

~~~
freshyill
IE 10 (and to a lesser extent, 11) has really wonky support. In a self-
contained SVG, it's fine. Once you need it to scale a certain way, you'll find
things get weird.

IE 10 basically dropped off the face of the earth, but 11 is stubbornly
hanging on. Still, if you're optimizing the size of SVG bytes for the benefit
of these browsers, you're likely to add that weight right back in with all the
IE-specific CSS you're likely to add in.

~~~
technion
If you deploy a Remote Desktop or Citrix Server based environment - which
Microsoft/Citrix continue to push heavily to enterprises - well Microsoft set
Windows 2016 Server as the flagship server OS and then for some reason didn't
include Edge. Just IE11.

This decision still makes IE11 Microsoft's recommended browser for those
deployments, which sets a course for certain enterprises to prefer it over
Edge for new deployments.

------
legulere
The icon with the two white dots is far from optimal still: The grouping is
unneccessary. style="fill:#FFFFFF" can be replaced by fill="#FFF". There are
useless newlines. height="100%" width="100%" can be replaced by height="512"
width="512"

~~~
edent
That's a good point! As I say in the readme, I left in the newlines to make
them more readable - but I'd certainly take a PR for the colours and grouping.

As for the heights - will that make a difference if the image is scaled?

------
superplussed
SVG is such a superior format for icons, it scales perfectly, is very
efficient size-wise. The only annoyance is getting them inline so that they
can be styled with CSS.

~~~
pen2l
I love SVG in general... I am curious to hear, is there any reason not to use
them? Maybe that it's not as well supported on older browsers?

~~~
Silhouette
_I am curious to hear, is there any reason not to use them?_

As an alternative image format to things like PNG? There aren't many, if it's
an image that lends itself to a vector format in the first place. SVGs have
been widely supported for some time, often have significant file size benefits
as we see here, and scale cleanly to different screen resolutions. You have to
go back to versions of IE that even the likes of Microsoft and Google won't
support any more or to very old mobile devices to start running into general
compatibility problems.

One thing to be aware of is that you are effectively programming your graphics
if you're using SVG, not just recording the image itself. If you start playing
with the more powerful features, particularly using non-trivial filters, you
might occasionally run into issues in the rendering code that turns your
program into an on-screen image. Depending on how much of that code is in the
browser itself and how much is delegated to the underlying OS/graphics drivers
for acceleration, that can cause problems including slow display of images,
distortion so the rendered image doesn't look right, or in extreme cases even
hanging the browser or graphics driver if you're unlucky enough to trigger
some underlying bug (which is obviously a rare result, but I have personally
seen it happen in my own development work). For the kinds of very simple SVGs
we're looking at here, I can't imagine any of these potential problems being a
serious risk, though.

------
franciscop
This is really great. As someone who has done quite a few size-sensitive
projects/experiments, have you considered providing them in a small website?
So _artists_ can contribute with more icons and developers who want to use
them can modify them when downloading (border radius, background, etc). I
could throw a quick prototype if that sounds good.

~~~
edent
Go for it :-)

------
z3t4
whenever i need a figure, instead of opening paint I hand code a SVG. It takes
a bit longer then painting. But is more acurate. its basically just xml and
math. maybe a bit of css for styling. i would like to see less bitmaps and
more SVG especially by web devs.

------
agumonkey
Oh tiny in storage, not in dimensions.

~~~
phkahler
SVG: Scalable Vector Graphics - can be rendered at any size.

~~~
agumonkey
Somehow unrelated, many people showed how at low resolution vector graphics
rendering alter the perceptual nature of icons compared to bitmaps (crafted by
human eyes for human eyes). So I believed the author made vector shapes, with
the goal of very small "ascii art" flavor baked in.

------
CaliforniaKarl
It's too bad that this site is even required.

When I was putting together a handout for work
([https://twitter.com/StanfordCompute/status/85047937335846502...](https://twitter.com/StanfordCompute/status/850479373358465024)),
I wanted to get vectors of the four logos that appear on the bottom of the
front side (of course I already had a vector of our logo).

Both SLAC and XSEDE had vectors available on their web site (IIRC, as EPS
files). For the Open Science Grid, I had to reach out to someone, but that was
easily done. Same for ICME.

I guess the corporate world is different: I'm sure they have vectors (likely
as .ai files, which can be exported easily enough), but don't want to make
them available. That's too bad.

------
Theodores
I might have to add my Instagram SVG to this collection. Mine is 4 lines of
SVG with a def for the the gradients. I started with the 1.8 Mb file provided
by the Instagram brand guidelines and set to work.

Inline SVG is the way to go, however, if you have a large SVG stylesheet then
some hacks are needed to load it as a cached image and get the thing inline on
the page. Greatest fun since LEGO though!

~~~
edent
Please do!

------
jpkeisala
I wish I would have big enough site that this would matter in bandwidth cost.

~~~
throwaway2016a
Even at Amazon S3 prices and a million downloads the cost savings of using the
SVG for the Github icon is only $1.60 per month. If it took an artist an hour
to make at $30 an hour it would take a year and a half to break even.

~~~
hexmiles
keep in mind that making the size smaller also make your website more light
and faster, same thing for android/ios app, where the fact that this icon are
in svg format make them scalable at different resolution, screensize and dpi.
Image are usualy the main reason to oversize app and webpage.

------
supercoder
I'm sure you have great intentions but sorry these don't look great. Can you
have both size and quality?

~~~
camoby
You might be missing the point of vectors.

------
cmrx64
> Simplicity should be our goal in all endeavours.

Then maybe we shouldn't use complex vector graphics, and instead use nice and
simple uncompressed raster graphics. /s

~~~
amelius
Especially since SVGs are not hinted for small sizes (AFAIK).

I'm not even sure if SVGs are rendered equally at the pixel level on all
render engines. This is important for small images.

~~~
Silhouette
_Especially since SVGs are not hinted for small sizes (AFAIK)._

This is true, but the situation is no different with the main raster image
formats either, and the solutions are the same either way.

 _I 'm not even sure if SVGs are rendered equally at the pixel level on all
render engines._

They certainly aren't. You're programming a graphic and then whatever
rendering stack is available on the user's device will render it as an on-
screen image. The quality of that render, for example when it comes to
gradients or anti-aliasing, is environment-dependent.

