search

adamfairhead / webicons

Webicons is a set of resolution-independent social icons for use on your website. They use feature-detected SVG graphics (with PNG fallbacks) to display the icons over their appropriate negatively indented anchor titles.
531 stars 61 forks source link

Do the PNG Fallback Icons Take Into Account High Resolution/Retina Displays? #4

Closed Vheissu closed 11 years ago

Vheissu commented 12 years ago

It appears as though the PNG fallback images aren't double sized images that are scaled down which is the norm for using PNG images on high resolution devices like iPhone's and iPad's, as well as other high resolution smartphones and computing devices.

As seen here: http://caniuse.com/#feat=svg-css - support for SVG's as background images is only partially supported and has issues in mobile Safari. Are high resolution fallbacks needed?

adamfairhead commented 12 years ago

No retina fallbacks are out of the box in this pack. I hear you about the patchy support for SVG, but since Modernizr only detects "available" and "unavailable", there's no alternative beyond making a decision between whether or not to serve SVGs to Mobile Safari users at all (a decision which votes in favor of SVG in the case of FC Webicons).

SVG can be a funny thing, but these icons stick to the stuff that works. No funky filters or anything like that, just shapes and gradients.

If an SVG author takes the time to learn which features of the spec will render and which won't, it's a safe, flexible and awesome format.

Generally with hi-res PNGs, I use standard+@2x PNG combos when I'm not using SVGs (like with photos). As long as everything has a "CSS3-Compatible" and "Non-CSS3 Compatible" version, that's good with me.

Hope that helps some?