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

11–20 of 121 posts

Re: Super Tiny Website Logos in SVG

#11

Post by tyingq »

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.

I mentioned the issue with gradients in another comment. There's also a good presentation here on other issues: http://slides.com/sarasoueidan/tips-for-avoiding-common-svg-...

Perhaps not all "bugs", but unexpected anyway.

Re: Super Tiny Website Logos in SVG

#12

Post by ss64 »

Someone should build a web service for delivering these social icons. They could place a random selection of 3 or 4 popular social icons on the page, and then, like AdSense the social sites could pay to get an increased number of placements, with a percentage paid back to the site owner.

Re: Super Tiny Website Logos in SVG

#14

Post by edent »

aw3c2 wrote: post #10

Very cool! I would advise to try minifying with svgomg, some icons seem to benefit. Eg bitbucket.svg can be reduced by 20% without any visual change.

Most of them were already minimised with SVGO and svgcleaner. If you can make them smaller - I'd love a pull request :-)

Re: Super Tiny Website Logos in SVG

#15

Post by Tloewald »

tyingq wrote: post #5
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

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.

Re: Super Tiny Website Logos in SVG

#16

Post by jordache »

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?

Re: Super Tiny Website Logos in SVG

#18

Post by teej »

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.

Re: Super Tiny Website Logos in SVG

#19

Post by vanderZwan »

I'm still a bit sad that Raphaël.js never quite caught on[0]. Same for its successor Snap[1]. I guess the main reason is that SVGs themselves weren't quite popular (and I assume there were also a few bugs) and take a proper illustrator to draw, compared to the ease of fetching JPG assets off the internet.

[0] http://dmitrybaranovskiy.github.io/raphael/

[1] http://snapsvg.io/

Re: Super Tiny Website Logos in SVG

#20

Post by spiralganglion »

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.

Historically, the SVG-related systems in most browsers haven't seen a lot of love, so it's lagged behind other web technologies. This seems to be getting better — I know Safari just landed a nice 3x performance improvement to one of the SVG filters.

Here's a handful of issues that I still encounter, due to cross-browser differences.

  * You can't use the full range of CSS3 colors.
  * You can't set certain style properties via CSS (requiring the use of attributes).
  * You can't use self-closing tags for certain elements.
  * Differing behaviour when you set an attribute to "null" (which is fine, it's just a gotcha)
SVG performance also varies wildly, more so than JS perf, HTML DOM perf, or CSS perf. This seems to correlate with the visual quality of the rendered result — Chrome is the fastest but has excessive smoothing, poor sampling of scaled images, etc; Safari is the slowest but produces the cleanest result.
Post reply on HN