Zoom in out mousedown

You can get the desired result using only css if you use percentage measures within svg.

svg {
  cursor: move;
  height: 100px;
  width: 100px;
}
svg:active {
  height: 200px;
  width: 200px;
}

<p>Clique na imagem para visualizar o efeito</p>
<svg>
  <image id=img1 data-type="img1" xlink:href="http://placehold.it/100x100" x=0 y=0 height=100% width=100% class="img1" />
</svg>

Depends on which zoom you are referring to. There are basically 2 types of ZOOM:

See this link on d3 to see these 2 definitions in practice.

That being said, it is understood that to zoom in or zoom OUT in an SVG image, you would only have to trigger a function that would change the properties of svg according to its scale and according to the type of ZOOM chosen. SVG are vector math functions that are given parameters to generate the contours, different from raster images that are jpeg, jpg, png, and other example pixels. In this Link you have an example.

Unfortunately you do not have a SVG image. What you have is an SVG stage with a png image ( favicon.png ) within that stage. See the piece of your code <image id=img1 data-type="img1" xlink:href=/favicon.png

If you want to use zomm in or zoom out on SGV images, you'll have to generate the images with your own tags, such as:

See the W3 link.

If you want to continue using raster images and zoom in, change the CSS properties. See example .