Correct way to add links in an SVG image [closed]

Question

If I have an SVG image and I want to make it interactive by adding some links, is right to do it this way?

<a href="https://www.link-1.com">
 <g>
 </g>
</a>

<a href="https://www.link-2.com">
 <g>
 </g>
</a>

So wrapping the <g> tag with an <a> tag? Or there is another best practice?

Answer 1

Your example is the correct way to add links to SVG.

SVG's <a> element is a container, which means you can create a link around text (like in HTML) but also around any shape.

Example:

<a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35" />
</a>

Source: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a