Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Super Tiny Website Logos in SVG

shkspr.mobi

Post reply on HN
Print view View original

71–80 of 121 posts

Re: Super Tiny Website Logos in SVG

#71

Post by ricardobeat »

mrb wrote: post #64
vladdanilov wrote: post #47

Earlier quoted context omitted.

Photoshop: 6 705 bytes, 128 colors, 1-bit alpha only TinyPNG: 6 179 bytes, 92 colors Optimage: 5 761 bytes, 154 colors TinyPNG + Optimage (lossless): 5 226 bytes, 92 colors https://imgur.com/a/X9DnJ TinyPNG tends to use fewer colors. But its compressor is pretty suboptimal. I could reduce the image further by 15.4% with the tool I'm making ( http://getoptimage.com ).

3545 bytes: https://i.imgur.com/dHIaRh1.png Used Gimp to convert to 4-bit paletted colormap, and processed through optipng. The original PNG icon was very clearly suboptimal at 20 225 bytes...

Imgur converts everything both of you posted to JPEG...

Re: Super Tiny Website Logos in SVG

#72

Post by cokernel »

thinkloop wrote: post #67
kekub wrote: post #3

I have been using https://simpleicons.org for a while now. It is super light and looks great. License is CC0. Although I prefer inlining the icons over using tags.

Cool resource, what do the color codes mean? All the icons seem to be in black when you download them. I've never seen a CC0 license before, looking it up, but if anyone knows what its about, feel free to share! Here is a resource of svgs of cryptocurrency icons: https://github.com/allienworks/cryptocoins/tree/master/SVG

CC0 is Creative Commons's license for dedication to the public domain:

https://creativecommons.org/publicdomain/zero/1.0/

Re: Super Tiny Website Logos in SVG

#73

Post by thinkloop »

cokernel wrote: post #72
thinkloop wrote: post #67

Earlier quoted context omitted.

Cool resource, what do the color codes mean? All the icons seem to be in black when you download them. I've never seen a CC0 license before, looking it up, but if anyone knows what its about, feel free to share! Here is a resource of svgs of cryptocurrency icons: https://github.com/allienworks/cryptocoins/tree/master/SVG

CC0 is Creative Commons's license for dedication to the public domain: https://creativecommons.org/publicdomain/zero/1.0/

It seems like one of the most permissive licenses, is it taking over MIT?

Re: Super Tiny Website Logos in SVG

#74

Post by semi-extrinsic »

thinkloop wrote: post #73
cokernel wrote: post #72

Earlier quoted context omitted.

CC0 is Creative Commons's license for dedication to the public domain: https://creativecommons.org/publicdomain/zero/1.0/

It seems like one of the most permissive licenses, is it taking over MIT?

As I understand it, "code licenses" like MIT and "content licenses" like Creative Commons have slightly different intended areas of application, and you shouldn't mix them. E.g. "linking" means different things for code and images.

So you'd use e.g. CC0 for an icon set together with MIT license for some javascript/whatnot code that goes with your icons.

Re: Super Tiny Website Logos in SVG

#75

Post by michaelbuckbee »

MayeulC wrote: post #65
michaelbuckbee wrote: post #63

Earlier quoted context omitted.

No CDN, but there's multiple repos of people taking the FontAwesome icons and converting them over to SVG. Here's the one I used: https://github.com/encharm/Font-Awesome-SVG-PNG Also, the new "Font Awesome Pro" comes with all icons as SVG out of the box - https://fontawesome.com/ Last, one annoyance (in the midst of many benefits) of using SVG instead of fonts as icons is that you can't change their color via CSS if…

I am pretty sure you can change a lot of SVG properties trough CSS (use "currentColor" to change the color, for example). There was a discussion about http://slides.com/sdrasner/svg-can-do-that/ some time ago, which gives some nice SVG styling examples.

So the distinction is inlining SVGs vs referring to them like you would a png with an img src=filepath.svg|png in your HTML.

It's handy to just treat them as you would images, but you lose some flexibility wrt being able to manipulate them via CSS b/c the browser now "thinks" of them like an image.

This SO post has a clever workaround (with I'm sure more caveats wrt performance, etc) that will auto-inline your svgs that you need to manipulate so you can get a best of both worlds type situation going.

https://stackoverflow.com/questions/24933430/img-src-svg-cha...

Re: Super Tiny Website Logos in SVG

#76

Post by abritinthebay »

Tloewald wrote: post #15
tyingq wrote: post #5

Earlier quoted context omitted.

I wish they had implemented gradients in a way that didn't depend on uri fragments. Not an issue with standalone svg images, but it means you have to manage namespace clashes for inline svg images.

I wish that CSS could be applied to them consistently.

It mostly can, outside of browser bugs anyhow.

The browser bugs are a big complication however

Re: Super Tiny Website Logos in SVG

#77

Post by abritinthebay »

stinky613 wrote: post #7
abritinthebay wrote: post #2

I love that people are rediscovering SVG I hope this gathers stream and forces Google (and others, but especially Google) to fix the bugs they have in the format

Could you elaborate on the bugs in SVG? Are there any usability issues beyond the bugs? I tried some cursory googling 'why not to use svg', 'svg bugs', etc and didn't really find any common/recurring.

One of the most annoying bugs is Chrome’s utterly broken implementation of the Use element for SVG.

That’s one of many, but it’s one they’ve know about for years.

Re: Super Tiny Website Logos in SVG

#78

Post by icebraining »

ricardobeat wrote: post #71
mrb wrote: post #64

Earlier quoted context omitted.

3545 bytes: https://i.imgur.com/dHIaRh1.png Used Gimp to convert to 4-bit paletted colormap, and processed through optipng. The original PNG icon was very clearly suboptimal at 20 225 bytes...

Imgur converts everything both of you posted to JPEG...

What do you mean? It's serving me a PNG image.

Re: Super Tiny Website Logos in SVG

#79

Post by darekkay »

vortico wrote: post #41

Amazing! With SVG being supported on all browsers you should care about today, it obsoletes icon fonts, which require the entire icon set to be downloaded. Anyone know of a FontAwesome-like project, ideally with a CDN, that serves SVG icons like Font Awesome has so including them in a website is easy and compact?

Font Awesome 5 icons are available in SVG. However, it's still in beta and available only to backers via early access until it is released.

https://fontawesome.com/

Post reply on HN