Loading SVG

//(function() {

Snap.plugin( function( Snap, Element, Paper, global ) {

  function addLoadedFrags( whichSVG, fragList, runWhenFinishedFunc ) { // This is called once all the loaded frags are complete
    for( var count = 0; count < fragList.length; count++ ) {
        myEl = whichSVG.append( fragList[ count ] );
    }
    runWhenFinishedFunc();
  }

  Paper.prototype.loadFilesDisplayOrdered = function( list, afterAllLoadedFunc, onEachElementLoadFunc ) {
     var image, fragLoadedCount = 0, listLength = list.length, fragList = new Array(), whichSVG = this;

      for( var count = 0; count < listLength; count++ ) {
        (function() {
          var whichEl = count,
          fileName = list[ whichEl ],
          image = Snap.load( fileName, function ( loadedFragment ) { 
               fragLoadedCount++;
               onEachElementLoadFunc( loadedFragment, fileName );
               fragList[ whichEl ] = loadedFragment;
               if( fragLoadedCount >= listLength ) {
                  addLoadedFrags( whichSVG, fragList, afterAllLoadedFunc );
               }
            } );  
        })();
     }
  };

});



// use custom callback funcs below, above funcs shouldn't need to be touched much
// it uses fragments, so they aren't loaded yet into the DOM fully

function onAllLoaded() {
        console.log('all loaded');
        
}

function onEachLoaded( frag, fileName ) {               
        if( myDisplayList[ fileName ] == "fade" ) {
                frag.select("*").attr({ opacity: 0.2 });
        }
        if( myDisplayList[ fileName ] == "zoom" ) {
                frag.select("svg").attr({ viewBox: '0 0 100 100' });
        }

        console.log(fileName, ' fragment loaded');
}

var s = Snap("#svgout");
var myLoadList = [ "Bird.svg", "Dreaming_tux.svg" ];
var myDisplayList = { "Bird.svg": "zoom", "Dreaming_tux.svg": "fade" };

s.loadFilesDisplayOrdered( myLoadList, onAllLoaded, onEachLoaded );
//})();

   


        Edit/Run