ajax_svg.js

    function loadSVG( url ) {
      // AJAX-y load the SVG icon
      var req = new XMLHttpRequest();
      req.onload = serializeSVG;
      req.open( 'get', url, true );
      req.send( null );
    } 
    
    function serializeSVG() {
      
      // Turn the SVG into a serialized string
      var ser = new XMLSerializer();
      
      toggleIcon = ser.serializeToString( this.responseXML.documentElement );
      
      insertToggleIcon( toggleIcon );
      
    }
    
    function insertToggleIcon( icon ) {
      
      // insert the toggle icon
      var navToggle = document.getElementById( 'nav-toggle' );
      
      navToggle.insertAdjacentHTML( 'afterbegin', '<span class="toggle-icon icon">' + icon + '</span>' );
    }
    
    // set toggle icon to svg if supported
    if ( Modernizr.svg ) {
      
      loadSVG( wpURLs.stylesheet_directory_uri + '/img/icons/icon_hamburger.svg' );
      
    }
  

I've been using the <svg> <use> trick lately which is so awesome. I've got a grunt workflow that packs all the fontawesome icons i use into a icons.svg sprite. Each icon has an id in the sprite that is referenced using a hash to include just that part of the image.

Accessibly Load SVG Icons

<div class="dark sticky stuck navigation top">
    <nav class="main-nav row">
        <a href="#">
            <h2>
                <svg class="light icon">
                  <title>Globe Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-globe"></use>
                </svg>
                Home
            </h2>
        </a>
        <a href="#">
            <h2>
                <svg class="light icon">
                  <title>Bookmark Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-bookmark"></use>
                </svg>
                Story
            </h2>
        </a>
        <a href="#">
            <h2>
                <svg class="light icon">
                  <title>Group of People Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-users"></use>
                </svg>
                Discuss
            </h2>
        </a>
        <a href="#">
            <h2>
                Media
                <svg class="light icon">
                  <title>Bullhorn Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-bullhorn"></use>
                </svg>
            </h2>
        </a>
        <a href="#">
            <h2>
                Contact
                <svg class="light icon">
                  <title>Envelope Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-envelope"></use>
                </svg>
            </h2>
        </a>
        <a href="#" class="donate">
            <h2>
                Donate
                <svg class="light icon">
                  <title>Heart Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-heart"></use>
                </svg>
            </h2>
        </a>
    </nav>
    <nav class="sub-nav row">
        <a href="#">
            <h4>
                <svg class="light icon">
                  <title>Gear Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-cog"></use>
                </svg>
                Settings
            </h4>
        </a>
        <a href="#">
            <h4>
                <svg class="light icon">
                  <title>Pencil Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-pencil-square"></use>
                </svg>
                Join
            </h4>
        </a>
        <a href="#">
            <h4>
                <svg class="light icon">
                  <title>Right Arrow Icon</title>
                  <use xlink:href="assets/img/icons.svg#icon-sign-in"></use>
                </svg>
                Login
            </h4>
        </a>
    </nav>
</div>

SVG PNG Fallback

        <script>
            (function(){
                if(Modernizr.svg) return false; 

                var icons = document.querySelectorAll('svg.icon');
                for(var i = 0; i < icons.length; i++) {
                    var icon = icons[i];
                    var light = icon.classList.contains('light');
                    var use = icon.querySelector('use');
                    var href = use.getAttribute('xlink:href');
                    var iconName = href.substring(href.indexOf('#') + 1 + 5);

                    var img = document.createElement('img');
                    img.setAttribute('class','icon');
                    img.setAttribute('src','assets/img/src/icons/' + ((light) ? 'white' : 'black') + '/png/256/' + iconName + '.png');

                    icon.outerHTML = img.outerHTML;
                }
            })();
        </script>

Only downside is your SVG Sprite can't be loaded from another domain, yet jonathantneal/svg4everybody#16