Loading SVG

Lets get an SVG shape loaded and displayed. We need a callback for when the file is loaded, then we can add it to our canvas.
Note, it gets loaded into Snap as a fragment.

// Tux image is from creative commons, I didn't create it!

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, callback ) {
		var image, fragLoadedCount = 0, listLength = list.length;
		var fragList = new Array;
                	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 ) {
                                                                	        callback( fragList );
                                                                	}
                                                        	} );  
                        	})();

                	}

	};


});

function compareFiles( fragS, fragD ) {
	                var allElements = fragS.selectAll("*");
                        var length = allElements.length;
                        var attributes, attrLen;
                        var idList = new Array; var skippedList = new Array;
			var attrName, attrValue, compareAttrValue;
			var myId, myEl, mySelector, compareEl, compareVal;
			var hasDiffAttr, elemAnimObjBefore, elemAnimObjAfter;
			

                        for( a = 0; a < length; a++ ) {
                                attributes = allElements[a].node.attributes;
				elemAnimObjBefore = {}; elemAnimObjAfter = {};
				hasDiffAttr = false;

                                if( attributes.id ) {
console.log( 'TODO: Precalculate this, so only needed once for repeated changes');

					attrLen = attributes.length;
					mySelector = '#' + attributes.id.value;
					compareEl = fragD.select( mySelector );

					for( x = 0; x < attrLen; x++ ) {
						
						attrName = attributes[x].localName;
						compareVal = compareEl.node.attributes[ attrName ];
						attrValue = attributes[x].value;
						compareAttrValue = compareEl.node.attributes[ attrName ].value;

						if( ( attrValue != compareAttrValue ) && ( attrName != 'style' ) ) { //change to function
							console.log('not match ' + attrName );
							hasDiffAttr = true;
							elemAnimObjBefore[ attrName ] = attrValue;
							elemAnimObjAfter[ attrName ] = compareAttrValue;				
						}
					};

					if( hasDiffAttr && attrName != 'style' ) {	//Snap doesnt seem to like style, export as XML attributes
                                        	idList.push( { id: attributes.id.value, attrBefore: elemAnimObjBefore, attrAfter: elemAnimObjAfter } );
					};

                                } else {
				}

                                
                        };
			return idList;
};

function startAnim ( container, changeList, fragS, duration, easing, callback ) {
	var changeListLength = changeList.length;
	for( which = 0; which < changeListLength; which++ ) {
		myId = changeList[ which ].id;
		myEl = container.select( '#' + myId );
		var attrBefore = changeList[ which ].attrBefore;
		var attrAfter = changeList[ which ].attrAfter;
			
		if( which == changeListLength - 1 ) {
			myEl.animate( attrAfter, duration, easing, callback  );
		} else {
			myEl.animate( attrAfter, duration, easing );
		}
	}; 

}

var s = Snap("#svgout");
var duration = 4000;
var easing = mina.bounce;

function animFrames( fragList, container, whichFrame ) {
	var frameChangeList = new Array;

	if( whichFrame >= fragList.length - 1  ) { return; };

	var frameList = compareFiles( fragList[ whichFrame ], fragList[ whichFrame + 1]);
 
	container.append( fragList[whichFrame] );       
	if( whichFrame > 0 ) {
 		Snap( container.node.firstElementChild ).remove()
	}

       startAnim( container, frameList, fragList[ whichFrame ], duration, easing, animFrames.bind(null, fragList, container, whichFrame + 1 ) );

}


s.loadFilesDisplayOrdered( ["Bird.svg", "Bird3.svg", "Bird.svg", "Bird3.svg", "Bird.svg"], function( fragList ) { 
	var g = s.g();
	animFrames( fragList, g, 0, null );
	
} );