Snap Docs  More SVG Dabbles

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.


//(function() {
	var s = Snap("#svgout"); 
	var fragList = new Array, fragLoadedCount = 0;

	function loadMulti( 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 );
								}
                                        		} );  
			})();

		}
	}

	function addLoadedFrags( list ) {
		for( var count = 0; count < list.length; count++ ) {
			s.append( fragList[ count ] );
		}
	}


	var myLoadList = [ "Bird.svg", "Dreaming_tux.svg" ];
	loadMulti( myLoadList );

//})();

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