title: Plugin to zoom and pan SVG
body: <p>I'm looking for a good plugin to easily zoom and pan an existing SVG image. I am already using a plugin called <a href="http://timmywil.github.io/jquery.panzoom/" rel="nofollow">Jquery.panzoom</a> and it works well but when zooming the SVG loses clarity and becomes blurry. Not sure if anyone can steer me in the right direction on that one?</p>
  
  <p>Here's my jQuery - </p>
  
  <pre><code>(function ($) {
  
      var $parent = $('#floor_plan');
  
      if($parent.length) {
  
          // set-up panzoom
          var $panzoom = $parent.find('.panzoom').panzoom({
              increment       : 0.5,
              minScale        : 1,
              maxScale        : 8,
              startTransform  : 'scale(4.0)',
              $zoomIn         : $parent.find('A[href=#zoom_in]'),
              $zoomOut        : $parent.find('A[href=#zoom_out]'),
              contain         : 'invert'
          }).panzoom('zoom', true);
  
          // handle scrolling in and out
          $panzoom.parent().on('mousewheel.focal', function (e) {
  
              e.preventDefault();
  
              var delta = e.delta || e.originalEvent.wheelDelta;
              var zoomOut = delta ? delta &lt; 0 : e.originalEvent.deltaY &gt; 0;
  
              $panzoom.panzoom('zoom', zoomOut, {
                  increment   : 0.1,
                  animate     : false,
                  focal       : e
              });
          });
      }
  })(jQuery);
  </code></pre>
  
  <p>And the HTML - </p>
  
  <pre><code>&lt;div id="floor_plan" class="hidden-xs hidden-sm"&gt;
  
      &lt;div class="zoom-control"&gt;
          &lt;a href="#zoom_in"&gt;&lt;i class="fa fa-fw fa-plus-square-o"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a href="#zoom_out"&gt;&lt;i class="fa fa-fw fa-minus-square-o"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="close"&gt;
          &lt;a href="#close_floor_plan"&gt;&lt;i class="fa fa-fw fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="panzoom"&gt;
          &lt;img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" alt="Floor Plan" style="width: 100%; height: auto; display: block" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Example JSFiddle here - <a href="http://jsfiddle.net/576a4qeh/1/" rel="nofollow">http://jsfiddle.net/576a4qeh/1/</a></p>
  
  <p>Original demo here (at bottom of page) - <a href="http://timmywil.github.io/jquery.panzoom/demo/" rel="nofollow">http://timmywil.github.io/jquery.panzoom/demo/</a></p>
  
  <p>Try and zoom in (using the mouse wheel over the image) and you will notice it is blurry. Resize the window and it jumps back to high quality.</p>
  
  <p>Look forward to your thoughts and help.</p>
  
  <p>Thanks!</p>