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

81–90 of 121 posts

Re: Super Tiny Website Logos in SVG

#81

Post by ovao »

jordache wrote: post #56
Twirrim wrote: post #30

Earlier quoted context omitted.

> Logos should be simple. Agreed. Simple but important things to also consider with Logos include "What does it look like if printed in black and white?" It's a bit outdated advice in some regards, based as much on letter headers, fax machines, and news print adverts, as anything else. You'll notice that almost all memorable logos work really well in black and white, though.

"simple" that's a very subjective term. Is there a way to quantify simplicity in terms of SVG? Can we say number of points & number of paths? What other constructs can be used to measure complexity?

For SVG, stripped filesize is actually a fairly good indicator of complexity.

Re: Super Tiny Website Logos in SVG

#82

Post by everdev »

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.

Is there an easy way to generate SVG icons from image files (.png, .jpg, etc.)? Or are each of these SVG icons created by hand?

Re: Super Tiny Website Logos in SVG

#83

Post by gvx »

jordache wrote: post #56
Twirrim wrote: post #30

Earlier quoted context omitted.

> Logos should be simple. Agreed. Simple but important things to also consider with Logos include "What does it look like if printed in black and white?" It's a bit outdated advice in some regards, based as much on letter headers, fax machines, and news print adverts, as anything else. You'll notice that almost all memorable logos work really well in black and white, though.

"simple" that's a very subjective term. Is there a way to quantify simplicity in terms of SVG? Can we say number of points & number of paths? What other constructs can be used to measure complexity?

There isn't really. Any of those things could be used as proxies (plus file size, number of XML elements, rendering time, and more), but the thing we are really interested in is subjective anyway.

File size after rendering to bitmap and lossy compression, like JPEG, might actually be one of the best quantitative proxies for simplicity, because lossy compression algorithms are designed to compress visual data that's interesting to humans well. Maybe an interesting experiment: take a whole bunch of logos and/or other images, let people rate them on a Likert scale or something on simplicity, and see if there's a correlation with JPEG file size.

Re: Super Tiny Website Logos in SVG

#84

Post by tlb »

Just to pick on the one I know best, the Y Combinator logo is way off. The corners shouldn't be rounded, and the Y is too big and its top branches are too thick.

Correct version: http://www.ycombinator.com/images/ycombinator-logo-fb889e2e.... this project: https://camo.githubusercontent.com/08ae881e8ce6d8f2278fa20d7...

Re: Super Tiny Website Logos in SVG

#85

Post by slouch »

thinkloop wrote: post #70
jordache wrote: post #16

At what point does using a vector SVG is worse than raster image? Level of image complexit, requiring a ton of path elements? the Twitter logo can be create in basically 2 path elements. What if my logo is much more complex? Is there a threshold at the complexity of my image results in an SVG payload > than a properly compressed raster image?

For tiny images like icons, where intricacies are hard to see, it's likely they will almost always be better in svg. Logos especially are generally by nature clean and simple to be able to quickly communicate brand through different mediums. From a practical sense, I'd be hard pressed to find a real logo/icon that wasn't better in SVG. Theoretically, of course there are limits, but the rule of thumb is strong: always…

Gradients are sometimes translated strangely--I used illustrator to cover some .eps graphics to svg that were given to me by some company and the gradients got funky.

Re: Super Tiny Website Logos in SVG

#86

Post by mkl »

icebraining wrote: post #78
ricardobeat wrote: post #71

Earlier quoted context omitted.

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

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

Are you sure? Zooming in here I see JPEG artifacts. Imgur also often lies about the image format in the URL.

Re: Super Tiny Website Logos in SVG

#87

Post by CapacitorSet »

mkl wrote: post #86
icebraining wrote: post #78

Earlier quoted context omitted.

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

Are you sure? Zooming in here I see JPEG artifacts. Imgur also often lies about the image format in the URL.

ImageMagick's `identify` claims it's a PNG:

    $ curl -OL https://i.imgur.com/dHIaRh1.png
    $ identify dHIaRh1.png
    dHIaRh1.png PNG 512x512 512x512+0+0 8-bit sRGB 3545B 0.000u 0:00.000

Re: Super Tiny Website Logos in SVG

#88

Post by maddyboo »

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

You can set the `fill` attribute on the `svg` tag to set the fill color, e.g.

`...`

I'm guessing that site just includes recommended color codes for your reference, but you're able to set the color to whatever you want.

Re: Super Tiny Website Logos in SVG

#89

Post by mkl »

CapacitorSet wrote: post #87
mkl wrote: post #86

Earlier quoted context omitted.

Are you sure? Zooming in here I see JPEG artifacts. Imgur also often lies about the image format in the URL.

ImageMagick's `identify` claims it's a PNG: $ curl -OL https://i.imgur.com/dHIaRh1.png $ identify dHIaRh1.png dHIaRh1.png PNG 512x512 512x512+0+0 8-bit sRGB 3545B 0.000u 0:00.000

Yes, I can reproduce that. I get served different versions depending on device/browser, and on my phone I got a 7883 byte JPEG!

Re: Super Tiny Website Logos in SVG

#90

Post by tordanik »

semi-extrinsic wrote: post #74
thinkloop wrote: post #73

Earlier quoted context omitted.

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.

CC0 can be used for source code. For example, the FSF lists it as a GPL-compatible free software license and states: "If you want to release your work to the public domain, we recommend you use CC0."

https://www.gnu.org/licenses/license-list.en.html#CC0

Creative Commons themselves have published a FAQ entry on the matter:

https://wiki.creativecommons.org/wiki/CC0_FAQ#May_I_apply_CC...

Post reply on HN