SVG Anchor Tag: Linking Shapes and Elements

Wrapping shapes inside an SVG <a> (anchor) element turns vector graphics into interactive hyperlinks, allowing users to navigate to internal anchors, external URLs, or trigger browser actions upon clicking. This article explores how the SVG anchor element functions, how it differs from standard HTML links, and how it handles interactivity, styling, and geometry.

The primary function of the SVG anchor element is to establish a hyperlink context for all child vector elements nested within it, including <rect>, <circle>, <path>, <polygon>, and <text>. Unlike standard HTML where links generally wrap rectangular block or inline boxes, the SVG <a> element adopts the exact geometric boundaries of its child elements. The clickable hit area corresponds directly to the rendered fill and stroke of the enclosed shapes rather than a generic bounding box.

To define the link destination, the modern standard uses the standard href attribute:

<svg viewBox="0 0 100 100">
  <a href="https://example.com" target="_blank">
    <circle cx="50" cy="50" r="40" fill="blue" />
  </a>
</svg>

In older SVG specifications (SVG 1.1), the namespace attribute xlink:href was required. While modern browsers fully support standard href, combining both or using standard href ensures compatibility across modern renderers.

Beyond navigation, the anchor element provides several key capabilities:

• Target Handling: It supports the target attribute (such as _blank or _self), controlling where the linked resource opens.
• Precise Hit Testing: Pointer events respect the shape definitions. If a shape has no fill, only the stroke might be clickable, unless configured otherwise using the pointer-events CSS property.
• Interactive Styling: Anchors allow CSS pseudo-classes like :hover, :focus, and :active to cascade directly to child shapes, making it straightforward to create animated vector buttons, interactive charts, and dynamic maps.
• Keyboard Accessibility: Wrapping shapes in an anchor element automatically integrates them into the document’s tab order, enabling keyboard navigation and screen reader interaction when paired with appropriate labels or ARIA attributes.