askvity

How Do I Make an SVG Link?

Published in SVG Linking 3 mins read

To make an SVG element clickable and function as a link, the simplest method is to wrap the target SVG element or group of elements with an SVG hyperlink element, using the <a> tag.

This approach works very similarly to creating hyperlinks for HTML elements. You can wrap a variety of SVG content, including simple shapes (like rectangles or circles), complex paths, individual elements, or even a <g> element containing multiple shapes and text, within the <a> tag to make them clickable.

Creating Clickable SVG Elements

Just as you would wrap a <div> or <img> in HTML with an <a> tag to make it a link, you can wrap SVG shapes or groups.

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <a href="https://www.example.com" target="_blank">
    <rect x="10" y="10" width="180" height="80" fill="#0077cc" />
    <text x="100" y="55" font-family="Arial" font-size="20" fill="white" text-anchor="middle" dominant-baseline="middle">Visit Example</text>
  </a>
</svg>

In this example, both the blue rectangle and the text "Visit Example" are part of the link because they are nested inside the <a href="..."> tag.

Using the <a> Tag in SVG

The <a> element in SVG is used to create hyperlinks. The primary attribute used to specify the link's destination is href. For compatibility with older SVG specifications or certain browsers, you might sometimes see xlink:href used instead, but href is the standard for modern SVG (SVG 2).

Here are key attributes you can use with the SVG <a> element:

Attribute Description
href Specifies the URL the link points to (modern standard).
xlink:href Specifies the URL (used in older SVG versions, requires xlink namespace).
target Specifies where to open the linked document (e.g., _blank for a new tab).
rel Specifies the relationship between the current document and the linked document.

Examples of Linking Different SVG Content

You can apply the <a> tag to various parts of your SVG:

  • Linking a single shape:

    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <a href="https://www.another-site.com">
    <circle cx="50" cy="50" r="40" fill="green" />
  </a>
</svg>

    The green circle becomes a clickable link.

  • Linking a group of elements:

    <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
  <a href="https://www.group-link.org">
    <g>
      <rect x="25" y="25" width="100" height="100" fill="purple" />
      <text x="75" y="75" font-family="Arial" font-size="16" fill="white" text-anchor="middle" dominant-baseline="middle">Click Me!</text>
    </g>
  </a>
</svg>

    Clicking anywhere within the purple square or on the "Click Me!" text will follow the link because both are inside the <g> element, which is wrapped by the <a> tag.

Best Practices

  • Accessibility: Add accessibility information within the <a> tag, such as a <title> or <desc> element, to provide context for screen readers.
    <a href="https://www.example.com">
  <title>Link to Example Website</title>
  <circle cx="50" cy="50" r="40" fill="blue" />
</a>
  • Styling: You can style the hover state of the link using CSS, targeting the a element within the SVG.
  • Clarity: Ensure the clickable area is visually clear to users.

By wrapping your desired SVG content with the <a> element and providing an href attribute, you effectively turn that portion of your SVG into a functional hyperlink.

Related Articles