Linking

Linking out of an SVG document

The SVG <a> element creates a hyperlink, much like the HTML <a> element. In SVG it is a container, so you can wrap it around a single shape, a text string, or a whole <g> group, and the entire wrapped graphic becomes clickable.

The destination goes in the href attribute:

<a href="https://example.com/">
  <circle cx="50" cy="50" r="40" />
</a>

You may encounter xlink:href used for the destination in older code. That attribute is deprecated: use plain href instead.

The SVG <a> element also takes the download, hreflang, ping, referrerpolicy, rel, and type attributes, matching the HTML <a> element. Support for them lags behind the HTML versions and differs from one attribute to the next, so check the browser compatibility table for <a> before relying on any of them.

Unlike HTML, SVG gives links no default appearance: a linked shape or text string looks exactly like an unlinked one. Style the link states yourself with CSS so the link is discoverable and its focus state is visible.

Linked shape and text

This example links a circle and a text label, and uses CSS to give both a hover and focus state.

<svg
  viewBox="0 0 220 100"
  width="220"
  height="100"
  xmlns="http://www.w3.org/2000/svg">
  <a href="https://example.com/">
    <title>A circle element</title>
    <circle cx="50" cy="50" r="40" />
  </a>

  <a href="https://example.com/">
    <text x="110" y="56">Text link</text>
  </a>
</svg>

Since a shape doesn't have any text for use by assistive technologies, we give the circle link an accessible name with a <title> element inside the <a>.

The CSS below gives both links a default fill color and changes that color on hover and on keyboard focus. The outline gives focus a second, non-color indicator, and the fill change keeps the focus state visible even where outline is not rendered on SVG elements.

a circle,
a text {
  fill: steelblue;
}

a text {
  text-decoration: underline;
}

a:hover circle,
a:focus-visible circle,
a:hover text,
a:focus-visible text {
  fill: crimson;
}

a:focus-visible {
  outline: 2px solid black;
  outline-offset: 2px;
}

Hover over either link, or press Tab to give it keyboard focus:

Setting the link target window

The target attribute names the browsing context the linked document should open in: _self (the default), _blank, _parent, or _top.

This matters most when the SVG is embedded in an HTML page with <object>, <iframe>, or <embed>. Such an SVG is a separate document in its own browsing context, so by default the linked page loads inside that embedded frame. Since the frame is usually sized to the graphic, and may be only a few pixels wide, the new page is left scrolled and clipped to the point of being unusable. Add target="_top" to replace the whole page instead.

In page1.html:

<p>This is an SVG button:</p>
<object width="100" height="50" type="image/svg+xml" data="button.svg"></object>

In button.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50">
  <a href="page2.html" target="_top">
    <title>Go to page 2</title>
    <rect width="100" height="50" fill="steelblue" />
    <text x="50" y="30" fill="white" text-anchor="middle">Page 2</text>
  </a>
</svg>

Use target="_parent" to replace only the immediately containing document, which differs from _top when the SVG is nested more than one frame deep.

Linking into an SVG document

Appending a fragment identifier to an SVG URL lets a link, or an embedding element, select which part of the graphic is shown. This is how you crop or zoom into an SVG without editing the file or shipping several copies of it.

Named views with <view>

The <view> element defines a "named view": a part of an SVG that can be referenced by its id attribute. The element takes a viewBox attribute, and optionally a preserveAspectRatio, which override the ones on the root <svg> element when the view's id is used as the URL fragment.

In shapes.svg:

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <view id="first" viewBox="0 0 100 100" />
  <circle cx="50" cy="50" r="40" fill="red" />

  <view id="second" viewBox="100 0 100 100" />
  <circle cx="150" cy="50" r="40" fill="green" />

  <view
    id="third"
    viewBox="200 0 100 100"
    preserveAspectRatio="xMidYMid meet" />
  <circle cx="250" cy="50" r="40" fill="blue" />
</svg>

Referencing shapes.svg#third now shows only the blue circle:

<img src="shapes.svg" width="300" height="100" alt="Three circles" />
<img src="shapes.svg#third" width="100" height="100" alt="A blue circle" />

The same fragment works anywhere the file's URL appears, including an <a href> pointing at the SVG file, an <iframe>, and CSS url() references.

Views defined in the URL with svgView()

If you can't edit the SVG file to add a <view> element, you can directly specify the view in the fragment itself using the svgView() syntax, passing viewBox() and, optionally, preserveAspectRatio():

shapes.svg#svgView(viewBox(200,0,100,100))
shapes.svg#svgView(viewBox(200,0,100,100);preserveAspectRatio(xMidYMid))

Such a fragment goes wherever the file's URL goes. Both of these crop the same shapes.svg to its blue circle, without the file declaring a <view> for it:

<img
  src="shapes.svg#svgView(viewBox(200,0,100,100))"
  width="100"
  height="100"
  alt="A blue circle" />

.blue-circle {
  width: 100px;
  height: 100px;
  background-image: url("shapes.svg#svgView(viewBox(200,0,100,100))");
}

Quote the URL in CSS: an unquoted url() can't contain the parentheses that svgView() needs.

Prefer a named <view> when you control the file: it keeps the view definition with the graphic, and it can be changed without updating every URL that points to it.

Referencing content within a document

The third kind of link is internal: SVG elements point at other elements by ID, in the same document or in an external one.

• <use> draws an element defined elsewhere: <use href="#icon" />. The reference can be external too, which is the basis of the SVG sprite pattern: <use href="icons.svg#search" />.
• Gradients, patterns, filters, masks, and clip paths are referenced with the CSS url() function, either from a presentation attribute or from CSS: fill="url(#gradient)", filter="url(#blur)", clip-path: url(#clip-shape).
• <textPath> lays text along a path referenced with href, and <mpath> takes its motion path the same way.

A few restrictions apply to references that leave the document:

• External references must be same-origin with the referencing document. There is no way to opt into a cross-origin reference.
• <use> with an external file is widely supported, but <use> pointing at a data: URL is not: browsers that once allowed it have since dropped it. See the browser compatibility table for <use>.
• Naming the external file without a fragment, to pull in its root element, is not supported everywhere. Always include a fragment identifier naming the element you want.
• Referencing an external SVG from the CSS filter, mask, and clip-path properties is supported less widely than the SVG attributes are. Check the compatibility table for the feature you plan to use.

See also

• SVG <a>, <use>, and <view> elements
• SVG href and target attributes
• HTML <a> element
• SVG as an image
• SVG and CSS