Difference between revisions of "SVG Cursors"
(Created page with " <div style="width:80ch"> =A Primer to SVG Cursors= ==Introduction== Inkscape 1.1 uses SVG cursors, replacing the previously used bitmaps. This allows more detailed cursors...") |
|||
| (2 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<div style="width: | <div style="width:120ch"> | ||
=A Primer to SVG Cursors= | =A Primer to SVG Cursors= | ||
| Line 7: | Line 7: | ||
Inkscape 1.1 uses SVG cursors, replacing the previously used bitmaps. | Inkscape 1.1 uses SVG cursors, replacing the previously used bitmaps. | ||
This allows more detailed cursors that scale better on HiDPI screens. | This allows more detailed cursors that scale better on HiDPI screens.<ref>Due to GTK issues, cursors on OSX do not currently benefit from better scaling.<br/>With GTK's experimental fractional scaling, cursors are rendered too large at scaling above 1.</ref> | ||
The supplied default cursors can be overridden via the normal GTK theming mechanism. | The supplied default cursors can be overridden via the normal GTK theming mechanism. | ||
| Line 20: | Line 21: | ||
# The default GTK cursor size is 32x32 pixels. | # The default GTK cursor size is 32x32 pixels. | ||
# Keep vertical and horizontal lines on the grid (which means snapping lines to the half pixel). | # Keep vertical and horizontal lines on the grid (which means snapping lines to the half pixel for lines one pixel wide). | ||
# 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> | |||
<?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" <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"> <span style="color:blue">Overridden by some cursors.</span> | |||
<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) --> <span style="color:blue">Paths aligned to half-pixels.</span> | |||
<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)"> <span style="color:blue">Slight shadow to offset cursor from background.</span> | |||
<rect x="8.5" y="8.5" width="15" height="12" style="stroke:white;stroke-width:3px"/> <span style="color:blue">White outline.</span> | |||
<rect x="8.5" y="8.5" width="15" height="12" style="stroke-width:1px"/> <span style="color:blue">Fill and stroke inherited from <svg> element.</span> | |||
</g> | |||
</svg> | |||
</poem> | |||
</blockquote> | |||
==Using SVG Cursors== | ==Using SVG Cursors== | ||
| Line 28: | Line 65: | ||
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) ''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 == | |||
{{reflist}} | |||
</div> | </div> | ||
Revision as of 07:40, 21 October 2020
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.
- The default GTK cursor size is 32x32 pixels.
- Keep vertical and horizontal lines on the grid (which means snapping lines to the half pixel for lines one pixel wide).
- 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.
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
- ↑ 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.