SVG Cursors

A Primer to SVG Cursors

Introduction

Inkscape 1.1 uses SVG cursors, replacing the previously used bitmaps. This allows more detailed cursors that scale better on HiDPI screens.

The supplied default cursors can be overridden via the normal GTK theming mechanism.

GTK does not directly support SVG cursors. We render cursors at the scale needed ourselves and then enable them via the existing GTK method for adding custom bitmap cursors. This also allows us to change some of the cursor colors to match, for example, the currently selected fill and stroke colors.

Creating SVG Cursors

Any SVG file can work as a cursor, but keeping a few things in mind will probably lead to better results.

1. The default GTK cursor size is 32x32 pixels.
2. Keep vertical and horizontal lines on the grid (which means snapping lines to the half pixel for lines one pixel wide).
3. By default, the hot spot (the point in the cursor that is active) is located at the upper left corner. This can be moved by specifying the custom attributes inkscape:hotspot_x and inkscape:hotspot_y in the SVG root element.
4. The shape tools show the current fill and stroke colors in the cursor while the Dropper tool shows the color that will be dropped or picked in the cursor. This is done by overwriting the fill and stroke properties in the root SVG element. Any child elements with undefined fill and stroke properties will then inherit these colors following the normal CSS cascade rules.

Example Cursor

The Rectangle Tool cursor:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     width="32" height="32" GTK default cursor size.
     inkscape:hotspot_x="4" Custom hotspot.
     inkscape:hotspot_y="4"
     style="fill:gray;stroke:black"> Overridden by some cursors.

  <defs>
    <!-- Shadow -->
    <filter id="shadow" x="-0.5" y="-0.5" width="2" height="2">
      <feOffset result="offOut" in="SourceAlpha" dx="1" dy="1" />
      <feGaussianBlur result="blurOut" stdDeviation="1" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>

  <!-- Cross (centered on hotspot) --> Paths aligned to half-pixels.
  <path d="M 1.5,4.5 7.5,4.5 M 4.5,1.5 4.5,7.5" style="fill:none;stroke:white;stroke-width:3px;stroke-linecap:square"/>
  <path d="M 1.5,4.5 7.5,4.5 M 4.5,1.5 4.5,7.5" style="fill:none;stroke:black;stroke-width:1px;stroke-linecap:square"/>

  <!-- Rectangle -->
  <g id="cursor" style="filter:url(#shadow)"> Slight shadow to offset cursor from background.
    <rect x="8.5" y="8.5" width="15" height="12" style="stroke:white;stroke-width:3px"/> White outline.
    <rect x="8.5" y="8.5" width="15" height="12" style="stroke-width:1px"/> Fill and stroke inherited from <svg> element.
  </g>
</svg>

Using SVG Cursors

The easiest way to use your new cursors is to drop them in your local (user) inkscape/icon/hicolor/cursor directory. Inkscape will search there first before using the default cursors installed with Inkscape. You can also put them in the cursor directory in another theme but then you must explicitly select that theme, either system wide or in Inkscape. Note, not all themes include a cursor directory so you may need to create it.

Notes