Hyperlinks Inside SVG Graphics

On occasion you may want elements in your SVGs to be clickable and to link to external or same-page URLs. It's easy to do with good old anchor tags (<a>). The only major difference really is the need to use xlink:href instead of simply href. Also, you'll want to make sure that the xlink namespace is declared on your SVG element. This only works with inline SVGs, not with SVGs that are included in an <img> tag.

Here’s an example for ya. I’ve simplified the markup shown below to be more concise and focus only on the necessary parts to understand the use of hyperlinks. You can have a look at the source to see the full SVG markup in all its glory, including shadows and gradients.

Here's the resulting graphic:

Hyperlinks in SVG Some Text

And here's the simplified SVG markup (interesting parts highlighted):

<svg viewBox="0 0 362 232" version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <g stroke="none" stroke-width="1" fill="none"
    fill-rule="evenodd">
    <a xlink:href="https://alligator.io">
      <polygon fill="#CA3030"
        points="..."></polygon>
    </a>
    <a xlink:href="https://www.w3.org/TR/SVG/"
	  target="_blank">
      <circle id="circle" fill="#30C3CA"
        cx="211.5" cy="139.5" r="56.5">
      </circle>
    </a>
    <a xlink:href="https://ponyfoo.com/"
	  target="_blank">
      <rect fill="#F79134"
        transform="..."
        x="..." y="..."
        width="94" height="94">
      </rect>
    </a>
    <a xlink:href="#code">
      <text
        transform="..."
        font-family="..." font-size="54"
        font-weight="normal" fill="#008F68">
          <tspan x="..." y="...">
            Some Text
          </tspan>
      </text>
    </a>
  </g>
</svg>

Search

🔎 Searching...