Lightweight SVG Zooming And Panning Plugin - SvgZoom.js

SvgZoom.js is a lightweight jQuery plugin that allows you to pan and zoom in/out a SVG image element using mouse wheel events and JavaScript hooks. Without any 3rd draggable plugin like jQuery UI.

See also:

• Tiny SVG Panning And Zooming Plugin With jQuery - Zoom SVG (Requires jQuery UI)
• JavaScript Library For Zooming & Panning SVG Elements - svg.pan-zoom.js
• jQuery Plugin For Panning and Zooming SVG Images

How to use it:

1. Embed your SVG element into the webpage.

<svg id="svgId" viewBox="0 0 512 512"><path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/></svg>

2. Download and include the SvgZoom.js script after loading jQuery library.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="SvgZoom.js"></script>

3. Initialize the plugin by creating a new SvgZoom object and specifying the selector of your SVG element.

var svgZoom = new SvgZoom('#svgId')

4. Default options to customize the plugin.

var svgZoom = new SvgZoom('#svgId',{
    mouseWheel: true,
    zoomSpeed: 0.065,
    maxZoom: Number.POSITIVE_INFINITY,
    minZoom: 0.5,
    initZoom: 1,
    center: true,
    viewClass: 'svgzoom-view',
    zoomSelector: '',
    dragCursorStyle: 'move',
    onZoomed: $.noop
})

5. API methods.

// set the zoom level
svgZoom.setZoom(0.8);

// center the SVG
svgZoom.center();

---

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