Tiny SVG Panning And Zooming Plugin With jQuery - Zoom SVG

Zoom SVG is a lightweight, cross-browser jQuery plugin that applies panning and zooming functionalities on any SVG objects using jQuery UI.

Features:

• Mouse-wheel to zoom in/out SVG.
• Drag'n'drop to pan SVG.

How to use it:

1. Load the needed jQuery, jQuery UI and jQuery Mousewheel plugin in your webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<script src="/path/to/jquery.mousewheel.js"></script>

2. Load the jQuery Zoom SVG plugin's JavaScript and CSS files as follow:

<link rel="stylesheet" href="zoom-svg.min.css">
<script src="jquery.zoom-svg.min.js"></script>

3. Embed your SVG image together with the zoom controls into a DIV container.

<div class="zoom-svg-container">
  <svg>
    ... SVG ...
  </svg>
  <div class="zoom-svg-zoom zoom-svg-zoom-in"> + </div>
  <div class="zoom-svg-zoom zoom-svg-zoom-rst"> = </div>
  <div class="zoom-svg-zoom zoom-svg-zoom-out"> - </div>
</div>

4. Call the function on the SVG element and done.

$("svg").zoomSvg();

5. Change the default zoom step size.

$("svg").zoomSvg({
  step :  5
});

---

This awesome jQuery plugin is developed by LaurentSouefConsulti. For more Advanced Usages, please check the demo page or visit the official website.