Fix SVG heights

fix-svg-height.js

/*
 * WebKit (possibly others; Firefox looks fine) does a bad job of scaling an
 * SVG's aspect ratio such that its contents fill the extent of the space
 * horizontally. If you're letting the browser determine the dimensions of your
 * SVG, including the aspect ratio (e.g. by setting a percentage width and using
 * `height: auto`), then you probably want to use `preserveAspectRatio="none"`
 * in your SVG for the best results. But if you can't do that, you can at least
 * bump up the SVG's height just enough for it to fill the `img` horizontally,
 * letting the browser add the leftover padding to the top and bottom rather
 * than the sides.
 */
$(document).ready(function() {
  function fixHeights() {
    $('img[src$=svg]').each(function(i, img) {
      img = $(img);
      img.height('auto');
      // Give the SVG at least 1px and at most 2px of extra height to make up
      // for the browser's bad aspect ratio padding the sides.
      img.height(Math.ceil(img.height()) + 1);
    });
  }

  var _raf;

  // Do it on the next frame after a resize.
  $(window).resize(function() {
    window.cancelAnimationFrame(_raf);
    _raf = requestAnimationFrame(fixHeights);
  });

  // ...and on ready.
  fixHeights();
});