diff --git a/README.md b/README.md index 197892ed..2aa5c348 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # Super Tiny Social Icons -Under 1KB each! Super Tiny Social Icons are minuscule SVG versions of your favourite logos +Under 1KB each! Super Tiny Social Icons are minuscule SVG versions of your favourite logos. The average size is 600 bytes! -The logos have a 512x512 viewbox and will scale up and down to suit your needs. +The logos are 400x400 & have a 512x512 viewbox. They will scale up and down to suit your needs. Originally created for my contact page - https://edent.tel/ ## How Small? -| 839 Bytes SVG | 31,061 Bytes PNG | 436 Bytes SVG | 26,980 Bytes PNG | 251 Bytes SVG | 16,093 Bytes PNG | +| 767 Bytes SVG | 31,061 Bytes PNG | 414 Bytes SVG | 26,980 Bytes PNG | 222 Bytes SVG | 16,093 Bytes PNG | |------ |----------- |------ |---------- |------ |----------- | | | | | | | | @@ -21,16 +21,16 @@ Bytes cost money. They cost money to store, transport, and process. Simplicity ## Scream if you want to go smaller -These files were minified using [svgo](https://github.com/svg/svgo) and then hand edited. Further smallification is possible. +These files edited by hand in Inkscape, then were minified using [svgo](https://github.com/svg/svgo) and [svgcleaner](https://github.com/RazrFalcon/svgcleaner). Further smallification may be possible. * Each of these has an `xmlns="http://www.w3.org/2000/svg"` in the `` tag. This isn't strictly necessary - but some web browsers won't display them as an image without it. * Newlines can be stripped - they've been kept for readability where possible. -* Rounded corners can be dropped - `rx="15%" ry="15%"` - the effect can be done in CSS if you want. +* Rounded corners can be dropped - `rx="15%"` - the effect can be done in CSS if you want. * The background colour can also be excluded if you're including it elsewhere. -* Colours can be simplified. `#FF0000` becomes `red` +* Colours can be simplified. `#FF0000` becomes `red`. * The precision of the paths is *mostly* 0 decimal places. A few logos have 1 or 2 dp to make them look more accurate. The precision can be reduced if necessary. -You can see the difference this makes in [`youtube.svg`](https://github.com/edent/SuperTinySocialIcons/raw/master/tiny/youtube.svg) which is a ginormous 1,074 Bytes. By applying some of the above techniques we can get it down to a svelte 998 Bytes in [`youtube-tiny.svg`](https://github.com/edent/SuperTinySocialIcons/raw/master/tiny/youtube-tiny.svg). +You can see the difference this makes in [`youtube.svg`](https://github.com/edent/SuperTinySocialIcons/raw/master/tiny/youtube.svg) which is a ginormous 1,032 Bytes. By applying some of the above techniques we can get it down to a svelte 981 Bytes in [`youtube-tiny.svg`](https://github.com/edent/SuperTinySocialIcons/raw/master/tiny/youtube-tiny.svg). Think you can make them smaller? Tell me by raising an issue! @@ -51,4 +51,4 @@ The majority of these vector logos are based on someone else's work. * [Google+](https://commons.wikimedia.org/wiki/File:Google_Plus_logo_2015.svg) - Public Domain * [HTML5 Shield](https://www.w3.org/html/logo/) - CC-BY -Where possible, they retain their original licenses. Some logos may be subject to copyright laws, but these files are small enough to memorise. +Where possible, they retain their original licenses. Some logos may be subject to copyright and trademark laws, but these files are small enough to memorise. diff --git a/tiny/amazon.svg b/tiny/amazon.svg index d8668cba..bb122044 100644 --- a/tiny/amazon.svg +++ b/tiny/amazon.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/dropbox.svg b/tiny/dropbox.svg index 8db6cb4d..495d7725 100644 --- a/tiny/dropbox.svg +++ b/tiny/dropbox.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/tiny/email.svg b/tiny/email.svg index 41574383..66b1d228 100644 --- a/tiny/email.svg +++ b/tiny/email.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/facebook.svg b/tiny/facebook.svg index 916d867c..23202720 100644 --- a/tiny/facebook.svg +++ b/tiny/facebook.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/flickr.svg b/tiny/flickr.svg index fde4f41d..7e3eca02 100644 --- a/tiny/flickr.svg +++ b/tiny/flickr.svg @@ -1,6 +1,6 @@ - - - + + + diff --git a/tiny/github.svg b/tiny/github.svg index c9db2ab8..a843b89a 100644 --- a/tiny/github.svg +++ b/tiny/github.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/google_plus.svg b/tiny/google_plus.svg index efad33fd..eff1fab9 100644 --- a/tiny/google_plus.svg +++ b/tiny/google_plus.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/hackernews.svg b/tiny/hackernews.svg index d527d7d8..b15ae7e6 100644 --- a/tiny/hackernews.svg +++ b/tiny/hackernews.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/html5.svg b/tiny/html5.svg index c62b297d..d80beacf 100644 --- a/tiny/html5.svg +++ b/tiny/html5.svg @@ -1,8 +1,6 @@ - - - - - - - + + + + + diff --git a/tiny/instagram.svg b/tiny/instagram.svg index c40c9480..e3c3e001 100644 --- a/tiny/instagram.svg +++ b/tiny/instagram.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/tiny/linkedin.svg b/tiny/linkedin.svg index b88c0a12..281ee1d1 100644 --- a/tiny/linkedin.svg +++ b/tiny/linkedin.svg @@ -1,6 +1,4 @@ - - - - - + + + diff --git a/tiny/lock.svg b/tiny/lock.svg index 456eeb99..e0117f46 100644 --- a/tiny/lock.svg +++ b/tiny/lock.svg @@ -1,9 +1,9 @@ - - + + - - - - + + + + diff --git a/tiny/mail.svg b/tiny/mail.svg index 902093f1..c001091e 100644 --- a/tiny/mail.svg +++ b/tiny/mail.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/paypal.svg b/tiny/paypal.svg index bc2c0084..97d863b9 100644 --- a/tiny/paypal.svg +++ b/tiny/paypal.svg @@ -1,7 +1,7 @@ - - + + - - + + diff --git a/tiny/pdf.svg b/tiny/pdf.svg index 0acdacfb..53de6ab0 100644 --- a/tiny/pdf.svg +++ b/tiny/pdf.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/phone.svg b/tiny/phone.svg index c3e5761a..22243e26 100644 --- a/tiny/phone.svg +++ b/tiny/phone.svg @@ -1,8 +1,8 @@ - - + + - - - + + + diff --git a/tiny/pinterest.svg b/tiny/pinterest.svg index 6c934521..5d32c959 100644 --- a/tiny/pinterest.svg +++ b/tiny/pinterest.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/reddit.svg b/tiny/reddit.svg index 28958b72..d6d928cf 100644 --- a/tiny/reddit.svg +++ b/tiny/reddit.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/rss.svg b/tiny/rss.svg index 07cb4d5a..d2bc3fdc 100644 --- a/tiny/rss.svg +++ b/tiny/rss.svg @@ -1,8 +1,8 @@ - - + + - - + + diff --git a/tiny/skype.svg b/tiny/skype.svg index e5147274..5ca26242 100644 --- a/tiny/skype.svg +++ b/tiny/skype.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/slideshare.svg b/tiny/slideshare.svg index c2ea38e2..60102dc1 100644 --- a/tiny/slideshare.svg +++ b/tiny/slideshare.svg @@ -1,7 +1,7 @@ - - + + - - + + diff --git a/tiny/snapchat.svg b/tiny/snapchat.svg index 18df7289..3572209a 100644 --- a/tiny/snapchat.svg +++ b/tiny/snapchat.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/soundcloud.svg b/tiny/soundcloud.svg index db57b9f0..be8c04cb 100644 --- a/tiny/soundcloud.svg +++ b/tiny/soundcloud.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/stackoverflow.svg b/tiny/stackoverflow.svg index c1a2a944..1d67e8a3 100644 --- a/tiny/stackoverflow.svg +++ b/tiny/stackoverflow.svg @@ -1,7 +1,7 @@ - - + + - - + + diff --git a/tiny/steam.svg b/tiny/steam.svg index 6a64f26c..0c45171b 100644 --- a/tiny/steam.svg +++ b/tiny/steam.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/telegram.svg b/tiny/telegram.svg index b8baa0b6..127b9029 100644 --- a/tiny/telegram.svg +++ b/tiny/telegram.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/tumblr.svg b/tiny/tumblr.svg index 22d54027..0869c8a6 100644 --- a/tiny/tumblr.svg +++ b/tiny/tumblr.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/twitter.svg b/tiny/twitter.svg index 065401f0..9827e3d3 100644 --- a/tiny/twitter.svg +++ b/tiny/twitter.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/vimeo.svg b/tiny/vimeo.svg index 8129756f..de04dea2 100644 --- a/tiny/vimeo.svg +++ b/tiny/vimeo.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/wechat.svg b/tiny/wechat.svg index 319b067d..62dddc1c 100644 --- a/tiny/wechat.svg +++ b/tiny/wechat.svg @@ -1,7 +1,7 @@ - - + + - - + + diff --git a/tiny/whatsapp.svg b/tiny/whatsapp.svg index 8350ef8c..07cec197 100644 --- a/tiny/whatsapp.svg +++ b/tiny/whatsapp.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/wikipedia.svg b/tiny/wikipedia.svg index 3e2fbd36..3c1e159a 100644 --- a/tiny/wikipedia.svg +++ b/tiny/wikipedia.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/wordpress.svg b/tiny/wordpress.svg index 1106df65..81216f19 100644 --- a/tiny/wordpress.svg +++ b/tiny/wordpress.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/tiny/youtube-tiny.svg b/tiny/youtube-tiny.svg index a959a49f..60d49cd7 100644 --- a/tiny/youtube-tiny.svg +++ b/tiny/youtube-tiny.svg @@ -1 +1,4 @@ - + + + + diff --git a/tiny/youtube.svg b/tiny/youtube.svg index 24d704e3..d861ae56 100644 --- a/tiny/youtube.svg +++ b/tiny/youtube.svg @@ -1,4 +1,4 @@ - - - + + +