Bitmaps and SVGs ⇥ counternotions.tumblr.com

There appears to be a bug in the new New York Times site for Retina display-equipped Macs: for some reason, the infinitely-scalable SVG version of the logo isn’t being used. Well, I say “for some reason”, but the actual reason is plain to see:

<script type="text/javascript">
if (/iPad|iPod|iPhone/.test(navigator.userAgent)){
  document.write('<img id="mastheadLogo" width="379" height="64" alt="The New York Times" src="http://i1.nyt.com/svg/nytlogo_379x64.svg">');
} else {
  document.write('<img id="mastheadLogo" width="379" height="64" alt="The New York Times" src="http://i1.nyt.com/images/misc/nytlogo379x64.gif">');
}
</script>

In fact, I’m surprised that they don’t simply serve the SVG to all WebKit users. It takes care of all MobileSafari users, plus Safari and Chrome on Retina display-equipped Macs (and non-Retina Macs, which also render it fine), plus Chrome on Android. There doesn’t appear to be a downside to this approach:

<script type="text/javascript">
if (/AppleWebKit/.test(navigator.userAgent)){
  document.write('<img id="mastheadLogo" width="379" height="64" alt="The New York Times" src="http://i1.nyt.com/svg/nytlogo_379x64.svg">');
} else {
  document.write('<img id="mastheadLogo" width="379" height="64" alt="The New York Times" src="http://i1.nyt.com/images/misc/nytlogo379x64.gif">');
}
</script>

Simple enough, right?