Live data from Hacker News

Super Tiny Website Logos in SVG

shkspr.mobi

21–30 of 121 posts

Re: Super Tiny Website Logos in SVG

#21

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?

Yes there is

Re: Super Tiny Website Logos in SVG

#22

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?

Yes, you can make an image that compresses to a smaller raster image vs. SVG, and complexity is a good way to do that. Especially possible if your image/logo isn’t just solid colors, but contains gradients or textures.

I would guess, though, that if you make a logo that is larger as an SVG than a compressed raster, you’ve probably made a bad logo. Logos should be simple.

Re: Super Tiny Website Logos in SVG

#23
post #18

In case anyone else was suspicious of the 20k file size for a 512x512 PNG with essentially two colors - it's way off. I dropped it into Photoshop and exported as PNG and it spit out an identical file that weighs in at 6k.

yes, was also curious why : it's 16bits per channel color encoding instead of a paletted image.

Re: Super Tiny Website Logos in SVG

#24
post #18

In case anyone else was suspicious of the 20k file size for a 512x512 PNG with essentially two colors - it's way off. I dropped it into Photoshop and exported as PNG and it spit out an identical file that weighs in at 6k.

And if you run it through https://tinypng.com it should get down even smaller. PNG compresses surprisingly well when it’s basically two colors + alpha.

Re: Super Tiny Website Logos in SVG

#29
post #27

But why , when I zoom in with my browser (using Ctrl-+) on that page, the icons don't look sharp? EDIT: I mean the table.

The second Twitter icon (which is an SVG) looks very sharp when zoomed in. The table of other icons is a screenshot, not in SVG, so those won't look sharp when zooming in.

Re: Super Tiny Website Logos in SVG

#30

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?

Yes, you can make an image that compresses to a smaller raster image vs. SVG, and complexity is a good way to do that. Especially possible if your image/logo isn’t just solid colors, but contains gradients or textures. I would guess, though, that if you make a logo that is larger as an SVG than a compressed raster, you’ve probably made a bad logo. Logos should be simple.

> 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.

Post reply on HN