This code is a complete SVG document which can be copied and pasted into a file saved as an SVG document (eg. makeZoom.svg) and run locally within your SVG compliant web browser. When the user clicks on the yellow rectangle the shape will increase in size giving the appearance that the document has just been zoomed in.

<svg	xmlns="http://www.w3.org/2000/svg" width="100%"
		xmlns:xlink="http://www.w3.org/1999/xlink" id="cont" viewBox="0 0 300 100">
  <g>	
    <g id="sketch" class="sketch">
      <rect x="130"
  y="6" width="20px" height="10px" fill="yellow" onclick="zoomIn()" />
    </g>
  </g>

  <script>
  <![CDATA[
  function zoomIn(){

    document.getElementById('sketch').parentNode.setAttribute('transform','translate(-70  ,-6)')
    document.getElementById('sketch').setAttribute('transform','scale(1.5)')
  }
  ]]>
  </script>
</svg>

I started off experimenting with viewBox however for simplicity, transform seems better suited for zoom, and panning.

Reference:
Coordinate Systems, Transformations and Units - SVG 1.1 - 20030114 [w3.org]
Example for viewbox control [carto.net]