Purpose of the Cursor Element in SVG Specs

In historical Scalable Vector Graphics (SVG) specifications, specifically SVG 1.1, the <cursor> element was designed to define custom, platform-independent mouse cursors directly within vector documents. It allowed developers to declare an image source along with precise hotspot coordinates, which could then be referenced by other SVG elements. While it played a pivotal role in early interactive web vector graphics, modern specifications have deprecated the element in favor of unified CSS standards.

Defining Custom Pointers in SVG 1.1

Before modern CSS standardized custom pointer definitions across all HTML elements, SVG needed an internal mechanism to control cursor appearance during user interaction. The <cursor> element served as a dedicated resource element—similar in concept to <clipPath> or <linearGradient>—placed inside a <defs> block.

Its primary function was to specify: - The Cursor Image: Identified through the xlink:href (or href) attribute, pointing to an external raster image (such as PNG or GIF) or another SVG resource. - The Hotspot: Defined using the x and y attributes. These attributes specified the exact pixel coordinates within the image that functioned as the active point of clicking.

Implementation and Usage

Once defined, the <cursor> element was applied to target vector shapes through the cursor presentation attribute or via inline CSS using a local Fragment Identifier URL.

An implementation typically appeared as follows:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <cursor id="customPointer" xlink:href="pointer.png" x="5" y="5" />
  </defs>

  <rect x="20" y="20" width="100" height="100" fill="blue" cursor="url(#customPointer), auto" />
</svg>

When a user hovered over the blue rectangle, the user agent would substitute the default system cursor with the image referenced by #customPointer, anchoring the click point at coordinate (5, 5).

Deprecation and Replacement

The <cursor> element was deprecated in the SVG 2 specification and is not part of modern web standards.

The decline of the element occurred because CSS Level 3 introduced native support for custom cursors and hotspot positioning directly in standard stylesheets:

.target-element {
  cursor: url('pointer.png') 5 5, auto;
}

Because CSS provides a cleaner, uniform solution across both HTML and SVG, browser vendors removed or ceased implementation of the SVG <cursor> element. Today, developers style vector cursors exclusively through standard CSS.