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.

3 thoughts on “SVG Wonkiness in Safari 5.1

  1. I was having the same trouble earlier today and your workaround (and some css tweaks to remove height attributes – my svgs were appearing ‘squished’ rather than stretched because the whitespace was being added then the image was being rendered restricted by height.) helped me out. I was already using a similar swap-out for .no-svg but like you pointed out, this browser *does* support them.

    Gotta love these sorts of web glitches.

    Thanks for the helpful post!

  2. Oskar says:

    Hi, adding an inline width and height in the svg fixed the issue for me in Safari 5.1.

  3. Great! I wonder if that is the root problem that Safari is freaking out because there isn’t a height attribute on the img.

    I’m not sure that it’s an ideal solution for me, as I like to have images fluid in responsive design. But this is great to know where the root issue is coming from.

    Thanks for the comment!

Leave a Reply

Your email address will not be published. Required fields are marked *