SVG Image Zoom and Drag Demo

In this tutorial, we will talk about how to zoom and drag svg.

For demo, please click [DEMO]

Additional Plugins Required


  • Create SVG Group.
  • Add any svg images, texts or shapes inside group.
  • When mousewheel event was fired, change the scale variable based on wheel up/down, reset group transform scale
  • When drag event was fired, reset group transform translate


  • You have to put any svg shapes, images etc into one specific svg group, otherwise, it wont be zoomed in/out together.


  1. How can I use a group if I load an SVG file with the svg.load command instead of loading an image like in your example?.

  2. var svg = $(‘#svgdiv’).svg(‘get’);
    var g = $(‘g’, svg.root())[0];

    $(g).bind(‘mousewheel’, function(event, delta) {


    works fine for me

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s