Zoom and drag-and-drop with SVG.js library

This example shows the use of the SVG.js library to:

create simple objects and set the drag-and-drop on them
grouping all the objects and make both the zoom and moving effects on the entire draw

<!DOCTYPE html>
<html>
    <head>
    	<meta name="description" content="Example of use of the SVG.js library" />
        <meta charset="utf-8">
        <title>SVG.js library example</title>
		<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>
		<script type="text/javascript" src="https://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.js"></script>
		<script type="text/javascript" src="https://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.parser.js"></script>
		<script type="text/javascript" src="https://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.import.js"></script>
		<script type="text/javascript" src="https://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.draggable.js"></script>
		<script type="text/javascript">
			
			var MAX_ZOOM_IN = 2.0;
			var MAX_ZOOM_OUT = 0.2;
			var zoomStep = 0.2;
			var actualZoom = 1.0;
			var MOVE_STEP = 100;
			var draw;
			var dataDraw;
			var group;
			
			$(function() {
				//Get the background image from the server and draw the objects
				$.get( "https://wafi.iit.cnr.it/webvis/tmp/tiger.svg", function( data ) {
					var xmlDataReceived = (new XMLSerializer()).serializeToString(data);
					
					//Set the viewport size
					draw = SVG('map').size('960px', '450px');
					
					//Set the double click event on the map to zoom on the double clicked point
					draw.dblclick(function(eventData) {
						group.center(eventData.x, eventData.y);
						zoomIn();
					});
					
					//Draw the background					
					dataDraw = draw.svg(xmlDataReceived);
					
					//Draw two circles and one rectangle on which to do the drag and drop
					var circle1 = draw.circle(100).fill('#ff0').draggable();
					var circle2 = draw.circle(100).fill('#ae2').draggable();
					var rect1 = draw.svg('<rect id="rect1235" x="50" y="50" fill="#F7931E" stroke="#C1272D" stroke-width="5" width="100" height="50"/>');
					var rect1 = rect1.get('rect1235').draggable();
					
					//Group the background and the created objects to do the tranformations on all
					group = draw.group();
					dataDraw.get('viewport').addTo(group);
					circle1.addTo(group);
					circle2.addTo(group);
					rect1.addTo(group);
					
				}, 'xml');
			});
			
			function zoomIn(){
				if(actualZoom < MAX_ZOOM_IN){
					actualZoom = roundFloat(parseFloat(actualZoom) + parseFloat(zoomStep));
					group.scale(actualZoom, actualZoom);
				}
			}
			
			function zoomOut(){
				if(actualZoom > MAX_ZOOM_OUT){
					actualZoom = roundFloat(parseFloat(actualZoom) - parseFloat(zoomStep));
					group.scale(actualZoom, actualZoom);
				}
			}
			
			function moveDrawLeft(){
				group.x(group.x() - MOVE_STEP);
			}
			
			function moveDrawRight(){
				group.x(group.x() + MOVE_STEP);
			}
			
			function moveDrawTop(){
				group.y(group.y() - MOVE_STEP);
			}
			
			function moveDrawBottom(){
				group.y(group.y() + MOVE_STEP);
			}
						
			function roundFloat(value){
				return value.toFixed(2);
			}

</script>
	</head>
	<body>
		<div id="map" width="960" height="450"></div>
		<br/>
		<button id="zoomIn" onclick="zoomIn()">Zoom In</button>
		<button id="zoomOut" onclick="zoomOut()">Zoom Out</button>
		<button id="moveLeft" onclick="moveDrawLeft()">Move left</button>
		<button id="moveRight" onclick="moveDrawRight()">Move right</button>
		<button id="moveTop" onclick="moveDrawTop()">Move top</button>
		<button id="moveBottom" onclick="moveDrawBottom()">Move bottom</button>
		
    </body>
</html>

Modified http://code.jquery.com/jquery-1.11.1.js to a secure url

Modified http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.js to a secure url

Modified http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.parser.js to a secure url

Modified http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.import.js to a secure url

Modified http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.draggable.js to a secure url

https://code.jquery.com/jquery-1.11.1.js

https://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.js

https://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.parser.js

https://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.import.js

https://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.draggable.js