Difference between revisions of "SVG Cursors"

From Inkscape Wiki
Jump to navigation Jump to search
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:


<div style="width:80ch">
<div style="width:120ch">


=A Primer to SVG Cursors=
=A Primer to SVG Cursors=
Line 24: Line 24:
# 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.
# 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.
# 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.
# 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:
<blockquote>
<poem>
&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="32" height="32" <span style="color:blue">GTK default cursor size.</span>
    inkscape:hotspot_x="4" <span style="color:blue">Custom hotspot.</span>
    inkscape:hotspot_y="4"
    style="fill:gray;stroke:black"&gt; <span style="color:blue">Overridden by some cursors.</span>
  &lt;defs&gt;
    &lt;!-- Shadow --&gt;
    &lt;filter id="shadow" x="-0.5" y="-0.5" width="2" height="2"&gt;
      &lt;feOffset result="offOut" in="SourceAlpha" dx="1" dy="1" /&gt;
      &lt;feGaussianBlur result="blurOut" stdDeviation="1" /&gt;
      &lt;feBlend in="SourceGraphic" in2="blurOut" mode="normal" /&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;!-- Cross (centered on hotspot) --&gt; <span style="color:blue">Paths aligned to half-pixels.</span>
  &lt;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"/&gt;
  &lt;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"/&gt;
  &lt;!-- Rectangle --&gt;
  &lt;g id="cursor" style="filter:url(#shadow)"&gt; <span style="color:blue">Slight shadow to offset cursor from background.</span>
    &lt;rect x="8.5" y="8.5" width="15" height="12" style="stroke:white;stroke-width:3px"/&gt; <span style="color:blue">White outline.</span>
    &lt;rect x="8.5" y="8.5" width="15" height="12" style="stroke-width:1px"/&gt; <span style="color:blue">Fill and stroke inherited from &lt;svg&gt; element.</span>
  &lt;/g&gt;
&lt;/svg&gt;
</poem>
</blockquote>


==Using SVG Cursors==
==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.
The easiest way to use your new cursors is to drop them in your local (user) <code>'''inkscape/icon/hicolor/cursors'''</code> 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 ==
== Notes ==

Latest revision as of 11:34, 11 January 2021

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.[1]

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/cursors 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

  1. Due to GTK issues, cursors on OSX do not currently benefit from better scaling.
    With GTK's experimental fractional scaling, cursors are rendered too large at scaling above 1.