Plugin to zoom and pan SVG

Question

I'm looking for a good plugin to easily zoom and pan an existing SVG image. I am already using a plugin called Jquery.panzoom 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?

Here's my jQuery -

(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 < 0 : e.originalEvent.deltaY > 0;

            $panzoom.panzoom('zoom', zoomOut, {
                increment   : 0.1,
                animate     : false,
                focal       : e
            });
        });
    }
})(jQuery);

And the HTML -

<div id="floor_plan" class="hidden-xs hidden-sm">

    <div class="zoom-control">
        <a href="#zoom_in"><i class="fa fa-fw fa-plus-square-o"></i></a>
        <a href="#zoom_out"><i class="fa fa-fw fa-minus-square-o"></i></a>
    </div>
    <div class="close">
        <a href="#close_floor_plan"><i class="fa fa-fw fa-times"></i></a>
    </div>

    <div class="panzoom">
        <img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" alt="Floor Plan" style="width: 100%; height: auto; display: block" />
    </div>
</div>

Example JSFiddle here - http://jsfiddle.net/576a4qeh/1/

Original demo here (at bottom of page) - http://timmywil.github.io/jquery.panzoom/demo/

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.

Look forward to your thoughts and help.

Thanks!

Answer 1

The problem is the way the browser handles the css "transform". In Firefox it is working with no problem. In Google Chrome the content is actually stretched (blur on zoom).

You have to find an other way of zooming like changing both the height and the width of the image.

Answer 2

Here's a simple approach:

HTML:

<div class="panzoom">
    <div class="img"></div>
</div>

<input id="zoom" type="range" class="zoom-range" step="1" min="200" max="1500">

CSS:

.panzoom {
    overflow: scroll;
    width: 250px;
    height: 200px;
}
.panzoom .img {
    background: url('http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg') no-repeat 0 0 fixed;
    min-height: 768px;
    min-width: 500px;
}

JS:

$("#zoom").change(function(){
    $(".panzoom .img").css("background-size", this.value + "px")
});

$('.panzoom .img').mousemove(function(e){
    var mousePosX = (e.pageX/$(window).width())*100;
    $(e.target).css('background-position-x', mousePosX +'%');
    var mousePosY = (e.pageY/$(window).height())*100;
    $(e.target).css('background-position-y', mousePosY +'%');
}); 

JSFiddle Demo