<svg style="width: 200px; height: 200px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- A link around a shape -->
  <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle" target="_blank">
    <circle cx="50" cy="40" r="35"/>
  </a>

  <!-- A link around a text -->
  <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text" target="_blank">
    <text x="50" y="90" text-anchor="middle">
      &lt;circle&gt;
    </text>
  </a>
</svg>

/* As SVG does not provide a default visual style for links,
   it's considered best practice to add some */

@namespace svg url(http://www.w3.org/2000/svg);
/* Necessary to select only SVG <a> elements, and not also HTML’s.
   See warning below */

svg|a:link, svg|a:visited {
  cursor: pointer;
}

svg|a text,
text svg|a {
  fill: blue; /* Even for text, SVG uses fill over color */
  text-decoration: underline;
}

svg|a:hover, svg|a:active {
  outline: dotted 1px blue;
}