diff --git a/README.md b/README.md index c94942e1..3f1e416b 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ # Super Tiny Social Icons -Under 1KB each! Super Tiny Social Icons are miniscule SVG versions of your favourite logos +Under 1KB each! Super Tiny Social Icons are minuscule SVG versions of your favourite logos -They are designed for a 512x512 viewbox - but should scale up and down to suit your needs. +The logos have a 512x512 viewbox and will scale up and down to suit your needs. -Originally designed for my contact page - https://edent.tel/ +Originally created for my contact page - https://edent.tel/ ## How Small? @@ -11,21 +11,26 @@ Originally designed for my contact page - https://edent.tel/ |------ |----------- |------ |---------- |------ |----------- | | | | | | | | +## Why so smallious? + +Bytes cost money. They cost money to store, transport, and process. Simplicity should be our goal in all endeavours. + ## Can you go smaller? Yes! These files were minified using [svgo](https://github.com/svg/svgo) and then hand edited. Further smallification is 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. +* 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 CSV if you want. +* The background colour can also be excluded if you're including it elsewhere. +* 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. -Newlines can be stripped - they've been kept for readability where possible. +You can see the difference this makes in `youtube.svg` which is a ginormous 1,074 Bytes. By applyig some of the above techniques we can get it down to a svelte 998 Bytes in `youtube-tiny.svg`. -Rounded corners can be dropped - `rx="15%" ry="15%"` - the effect can be done in CSV if you want. +Think you can make them smaller? Tell me by raising an issue! -The background colour can also be excluded if you're including it elsewhere. - -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 dropped if necessary. - -More? Tell me by raising an issue! +Want more icons? Tell me by raising an issue! ## Licenses @@ -39,4 +44,3 @@ The majority of these vector logos are based on someone else's work. * [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. - diff --git a/tiny/amazon.svg b/tiny/amazon.svg new file mode 100644 index 00000000..01bd21ad --- /dev/null +++ b/tiny/amazon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/dropbox.svg b/tiny/dropbox.svg new file mode 100644 index 00000000..f1e34006 --- /dev/null +++ b/tiny/dropbox.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/tiny/facebook.svg b/tiny/facebook.svg new file mode 100644 index 00000000..b00d9d19 --- /dev/null +++ b/tiny/facebook.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/google_plus.svg b/tiny/google_plus.svg new file mode 100644 index 00000000..e7cea62e --- /dev/null +++ b/tiny/google_plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/tiny/hackernews.svg b/tiny/hackernews.svg new file mode 100644 index 00000000..f1844983 --- /dev/null +++ b/tiny/hackernews.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/html5.svg b/tiny/html5.svg new file mode 100644 index 00000000..c62b297d --- /dev/null +++ b/tiny/html5.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/tiny/instagram.svg b/tiny/instagram.svg new file mode 100644 index 00000000..61ec3503 --- /dev/null +++ b/tiny/instagram.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/linkedin.svg b/tiny/linkedin.svg new file mode 100644 index 00000000..b01854c0 --- /dev/null +++ b/tiny/linkedin.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/tiny/paypal.svg b/tiny/paypal.svg new file mode 100644 index 00000000..2aa29d0c --- /dev/null +++ b/tiny/paypal.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/tiny/pinterest.svg b/tiny/pinterest.svg new file mode 100644 index 00000000..cc2dd32f --- /dev/null +++ b/tiny/pinterest.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/slideshare.svg b/tiny/slideshare.svg new file mode 100644 index 00000000..ba750cae --- /dev/null +++ b/tiny/slideshare.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/tiny/snapchat.svg b/tiny/snapchat.svg new file mode 100644 index 00000000..67953e71 --- /dev/null +++ b/tiny/snapchat.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/soundcloud.svg b/tiny/soundcloud.svg new file mode 100644 index 00000000..64fcd8ac --- /dev/null +++ b/tiny/soundcloud.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/spotify.svg b/tiny/spotify.svg new file mode 100644 index 00000000..3512eebe --- /dev/null +++ b/tiny/spotify.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/stackoverflow.svg b/tiny/stackoverflow.svg new file mode 100644 index 00000000..19cc2687 --- /dev/null +++ b/tiny/stackoverflow.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/tiny/steam.svg b/tiny/steam.svg new file mode 100644 index 00000000..6d33a67a --- /dev/null +++ b/tiny/steam.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/tumblr.svg b/tiny/tumblr.svg new file mode 100644 index 00000000..3aab228b --- /dev/null +++ b/tiny/tumblr.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/vimeo.svg b/tiny/vimeo.svg new file mode 100644 index 00000000..aa1639e9 --- /dev/null +++ b/tiny/vimeo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/wechat.svg b/tiny/wechat.svg new file mode 100644 index 00000000..50981163 --- /dev/null +++ b/tiny/wechat.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/tiny/whatsapp.svg b/tiny/whatsapp.svg new file mode 100644 index 00000000..0789ac39 --- /dev/null +++ b/tiny/whatsapp.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/wikipedia.svg b/tiny/wikipedia.svg new file mode 100644 index 00000000..3e2fbd36 --- /dev/null +++ b/tiny/wikipedia.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/wordpress.svg b/tiny/wordpress.svg new file mode 100644 index 00000000..13c74421 --- /dev/null +++ b/tiny/wordpress.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tiny/youtube-tiny.svg b/tiny/youtube-tiny.svg new file mode 100644 index 00000000..a959a49f --- /dev/null +++ b/tiny/youtube-tiny.svg @@ -0,0 +1 @@ + diff --git a/tiny/youtube.svg b/tiny/youtube.svg new file mode 100644 index 00000000..bd872834 --- /dev/null +++ b/tiny/youtube.svg @@ -0,0 +1,4 @@ + + + +