A CodePen by teheran. jQuery Draggable with out jQuery UI - It doesn't have all the fancy callbacks and options, but hey, it makes things draggable. From: http://reader-download.googlecode.com/svn/trunk/jquery-draggable/index.html

index.html

<div>
    <svg id="svgRoot" 
        xmlns="http://www.w3.org/2000/svg" version="1.1" 
        width="100%" height="100%" 
        viewBox="0 0 300 300">
            
        <symbol id='symbol'>
            <image width="100" height="100" 
                xlink:href="http://upload.wikimedia.org/wikipedia/commons/c/cb/Footnote.svg"/>
        </symbol>
        
        <g id="svgElement">
            <use transform='translate(000,000)' xlink:href="#symbol"/>
            <use transform='translate(100,000)' xlink:href="#symbol"/>
            <use transform='translate(200,000)' xlink:href="#symbol"/>
            <use transform='translate(000,100)' xlink:href="#symbol"/>
            <use transform='translate(100,100)' xlink:href="#symbol"/>
            <use transform='translate(200,100)' xlink:href="#symbol"/>
            <use transform='translate(000,200)' xlink:href="#symbol"/>
            <use transform='translate(100,200)' xlink:href="#symbol"/>
            <use transform='translate(200,200)' xlink:href="#symbol"/>
        </g>
    </svg>
</div>

script.js

var svgRoot = document.getElementById('svgRoot');

function zoomSvgElement(element, center, scale) {
    var matrix = element.getTransformToElement(svgRoot)
                .translate(center.x, center.y)
                .scale(scale)
                .translate(-center.x, -center.y);
    
    element.setAttribute("transform", "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")");
}

function createSVGMatrix() {
    return svgRoot.createSVGMatrix()
}

function createSVGPoint(clientX, clientY) {
    var result = svgRoot.createSVGPoint();
    result.x = clientX; 
    result.y = clientY;
    return result;
}

function convertClientXY(element, clientX, clientY) {
    return createSVGPoint(clientX, clientY)
           .matrixTransform(element.getScreenCTM().inverse());
}

var commonRatio = 1.1;  // знаменатель zoom-прогрессии
function translateMouseWheelClicksToScale(clicks) {
    return Math.pow(commonRatio, clicks);
}

var accumulator = 0;    // накопитель щелчков колесика мышки
$('#svgElement').mousewheel(function(event, delta, deltaX, deltaY) {
    zoomSvgElement(
        this,
        convertClientXY(this, event.pageX, event.pageY),
        translateMouseWheelClicksToScale(/*accumulator += */Math.round(delta)));
    
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        return false;
    }
});

$('div').mousemove(function(e) {
    $('#statusDiv').html( e.pageX +', '+ e.pageY );

}); 

style.css

svg {
    cursor:"" all-scroll;
}
svg {
    display: block;    
    margin: auto;
    background: gray;
    cursor: all-scroll;
}

div {
    border:1px solid red;
    margin: 3%;
    padding: 3%
}