SVG Wonkiness in Safari 5.1

I had a client who was still rocking an old school iMac that was running OSX Snow Leopard. That’s the latest version you can install, and as a result, can only upgrade to Safari 5.1. As I was using SVG in <img> tags on this site, they were rendering really oddly.

<img src="http://superiorcampers.com/wp-content/themes/supcamp_40/img/logo.svg" onerror="this.onerror=null; this.src='http://superiorcampers.com/wp-content/themes/supcamp_40/img/logo.png'" alt="Superior Campers">

It was as if the browser was adding padding: 50px 0; to the <img> but I couldn’t override it. I found a quick and dirty jquery fix for this. This works assuming you have an PNG fallback for your SVG’s, which you should for IE8 (at least as of the time of this writing).

//safari 5.1 polyfill hack
$(window).load(function() {
  //all images with .svg
  $('img[src*=".svg"]').each(function () {

    var
      $self = $(this);

    //If rendering really tall
    if ( $self.height() > 900 ) {
      //go to IE png fallback
      $self.attr('src', $self.attr('src').replace(/.svg/, '.png'));
    }
  });
});

Because Modernizr showed this browser as supporting SVG, the hack is to look at the .height() of the <img> after all resources are loaded, and if it’s over 900px, fallback to the PNG. Not pretty, but it fixed the issue. Let me know if you found a better fix.