edent-gh/SuperTinyIcons
1
0
Fork 0
forked from edent/SuperTinyIcons
Code Pull Requests Activity

Bulk upload

Browse Source
This commit is contained in:
edent
2017-04-14 11:26:59 +01:00
parent f826a54aa8
commit 07f50efbe8
25 changed files with 130 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@@ -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/
|------ |----------- |------ |---------- |------ |----------- |
| <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/master/tiny/github.svg" width="100" /> | <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/master/original/github.png" width="100" /> | <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/1d6887058425cbfe913ed0abcf4480c449212008/tiny/twitter.svg" width="100" /> | <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/master/original/twitter.png" width="100" /> | <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/master/tiny/flickr.svg" width="100" /> | <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/master/original/flickr.png" width="100" /> |
## 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 `<svg>` 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 `<svg>` 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.