6 ms·
Do your math based on your use case: This is the top-left question mark icon. M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.
by gokhan 16y ago
Do your math based on your use case:
This is the top-left question mark icon.
M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466z M17.328,24.371h-2.707v-2.596h2.707V24.371zM17.328,19.003v0.858h-2.707v-1.057c0-3.19,3.63-3.696,3.63-5.963c0-1.034-0.924-1.826-2.134-1.826c-1.254,0-2.354,0.924-2.354,0.924l-1.541-1.915c0,0,1.519-1.584,4.137-1.584c2.487,0,4.796,1.54,4.796,4.136C21.156,16.208,17.328,16.627,17.328,19.003z
It's around 430 bytes. Cropped from a screenshot, Photoshop says 705 bytes for gif, 643 bytes for 8 bit png (without transparency or scalability or anything).
Raphael.js from the page is >50KB. There's also an onload function to initialize the path, around 1KB (includes loops etc. specific to this page).
- someone_here 16y agoIt's the flexibility that matters. You can do way more things with Raphael.js and an SVG path than any image.
- joelanman 16y agoyes, you can resize them, change icon colours, augment/animate them on the fly, build them from live data..
- dugmartin 16y agoI think the best use case is when you need to present the same icons scaled to different sizes. The one that comes to mind is a web based file manager with different views (small icons, large icons, details with icons, etc). OT, but it sort of reminds me of drawing xbm icons in the early days of the web.
- dagw 16y agoIf you just need a static icon then I agree that this is overkill. However if you need each icon in several different sizes, colours and/or rotations, then the overhead will quickly pay for itself.
- johnkary 16y agoMultiple HTTP requests will be more expensive than the drop-in-the-bucket 50KB to load the library. Sure, you could sprite all your icons but that's a lot of fragile CSS to maintain.
- sgallant 16y agoAlso, if you want to update or add an icon you could do it on the fly and not have to worry about updating your css sprite file.
- olegk 16y agoYour PNG compressor is garbage. PNG, 339 bytes: http://i.imgur.com/68vR8.png http://i.imgur.com/68vR8.png Also don't forget that the path string will be gzipped (to around 220 bytes).
- sharkbrainguy 16y agoWouldn't it be more useful to compare the gzipped size? Isn't that how it would most often be delivered? That 430 bytes string becomes 222 bytes and RaphaelJS becomes just under 20k.
- pjscott 16y agoIf you want PNG files or standalone SVG files, I converted them all. Here's a zip file with 32x32, 64x64, and 128x128 PNG images: http://www.ece.iastate.edu/~pjscott/raphael_icons/raphael_icons.zip http://www.ece.iastate.edu/~pjscott/raphael_icons/raphael_ic... The images are also available individually, along with source code: http://www.ece.iastate.edu/~pjscott/raphael_icons/ http://www.ece.iastate.edu/~pjscott/raphael_icons/ Automation is great, isn't it? One problem I ran into is that ImageMagick was giving some nasty bugs on a few of the SVG files, so I had to switch to librsvg instead, which worked properly (and faster). EDIT: Submitted to HN along with a bit more commentary: http://news.ycombinator.com/item?id=1419100 http://news.ycombinator.com/item?id=1419100