Loading SVG

Lets get an SVG shape loaded and displayed in order, normally its async so they can get ordered differently.
Note, it gets loaded into Snap as a fragment and appended in order.


//(function() {

Snap.plugin( function( Snap, Element, Paper, global ) {
        var fragList = new Array, fragLoadedCount = 0;

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

        Paper.prototype.loadFilesDisplayOrdered = function( list ) {
                var image, fragLoadedCount = 0, listLength = list.length;

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

                        }

        };


});


        var s = Snap("#svgout");
        var myLoadList = [ "Bird.svg", "Dreaming_tux.svg" ];
        s.loadFilesDisplayOrdered( myLoadList );

//})();

   


        
The actual svg markup looks like this (when you've clicked on run)....