Pull in SVG as object svg for Safari. Height etc.

gistfile1.txt

<object class="svg" data-fallback="/library/images/icons/twitter.png">
  <?php include_once(TEMPLATEPATH .'/library/images/icons/twitter.svg'); ?>
</object>

<style type="scss">
  /* Responsive SVGs 
    Svgs don't like their ratio in safari. So we remove the browsers ability to 
    use it's own free will. Then we make the fucking thing work responsively. Neat! */
  object.svg {
  	width: 100%;
  	display: block;
  	height: auto;
  	position: relative;
  	padding-top: 100%;
  
    svg {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0;
    	left: 0;
    }
  }
</style>

<script>
  // We're going to pull in the fall back PNG if no svg support.
  // But what this allows is direct access to all the elements of
  // an SVG, targetable by css or js.
  jQuery(document).ready(function($){
    if (!Modernizr.svg) {
      var $svg = $('object.svg');
      $svg.each(function(){
        var $fallback = $(this).data('fallback');
        $(this).html($fallback); // Replaces the contents of the <object> with png.
      });
    }
  });
</script>