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

61–70 of 121 posts

Re: Super Tiny Website Logos in SVG

#61

Post by majewsky »

Eduard wrote: post #54
IshKebab wrote: post #42

Earlier quoted context omitted.

Inkscape is ok. It has serious issues though - pretty terrible performance, confusing UI, still requires X11 on Mac, etc. Probably still the best free SVG editor but I'm not sure I'd go so far as to call it good.

Using it for years. Never experienced any of the mentioned problems

The performance issues are real. Just open a complex SVG, select a few thousand elements with a rubberband selection, and see how everything slows to a crawl as it tries to render the outlines. If that is not slow, try manipulating that selection (e.g. scaling, rotating).

Re: Super Tiny Website Logos in SVG

#62

Post by vladdanilov »

majewsky wrote: post #60
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 ).

> 92 colors I see 3 colors (blue, white, transparent).

The rest are needed to keep anti-aliased shapes smooth.

Re: Super Tiny Website Logos in SVG

#63

Post by michaelbuckbee »

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?

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 you're including them via img src='file.svg'

So I use BoxySVG. Boxy is to Illustrator as Acorn or Pixelmator are to Photoshop. A tightly focused editor that lets you do simple things (like edit colors) very rapidly and doesn't bog you down with a ton of extraneous features.

https://boxy-svg.com/

Re: Super Tiny Website Logos in SVG

#64

Post by mrb »

vladdanilov wrote: post #47
dawnerd wrote: post #24

Earlier quoted context omitted.

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.

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

Re: Super Tiny Website Logos in SVG

#65

Post by MayeulC »

michaelbuckbee wrote: post #63
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?

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.

Re: Super Tiny Website Logos in SVG

#67

Post by thinkloop »

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

Re: Super Tiny Website Logos in SVG

#68

Post by EvilTerran »

grenoire wrote: post #31
freshyill wrote: post #28

They aren't all under 1KB, but there a few repos on GitHub hosting all of the Font Awesome icons as SVG. Also, if you can avoid it, don't use https://github.com/ivanvotti/font-awesome-svg/tree/master/SV...

Unfortunately you cannot reuse the icons that way, which does end up being wasteful unless you use compression.

I believe you can define a in one inline SVG, then it in another, so that'd be a way to achieve icon reuse. Not sure how good browser support is for that, though - there's probably quirks.

Re: Super Tiny Website Logos in SVG

#69

Post by thinkloop »

grenoire wrote: post #31
freshyill wrote: post #28

They aren't all under 1KB, but there a few repos on GitHub hosting all of the Font Awesome icons as SVG. Also, if you can avoid it, don't use https://github.com/ivanvotti/font-awesome-svg/tree/master/SV...

Unfortunately you cannot reuse the icons that way, which does end up being wasteful unless you use compression.

You can reuse inline icons with JS - for example if you made a react component of it.

Re: Super Tiny Website Logos in SVG

#70

Post by thinkloop »

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 use svg for logos and icons.

Post reply on HN