Apple uses SVG on apple.com

High pixel density displays will be mainstream. Apple released a new iPad and it has a Retina Display. Retina Display was introduced with iPhone 4 and OS X Lion already has secret HiDPI display mode. Rumor has it that Apple will release new Mac with Retina Display.

That means the web have to be embrace such a great screen. GitHub uses a double-sized PNG on their logo. And Apple's enginners proposed and implemented a new CSS function: image-set() on WebKit.

However, Apple takes a more radical approach: use SVG.

apple.com's global menu (<nav>) uses global_text.svg on backgroud-image. Of course it has PNG (with alpha) and GIF fallbacks too.

#globalheader.svg #globalnav li a span {
  background-image: url(/global/nav/images/globalnav_text.svg);
}
#globalheader #globalnav li a span {
  ...
  background: url(/global/nav/images/globalnav_text.png) no-repeat 50% 0;
  _background-image: url(/global/nav/images/globalnav_text.gif);
}

A browser choose SVG when Apple's own Modernizr like JavaScript adds ".svg" to #globalheader.