SVG Cursors - Revision history

Adambelis: /* Using SVG Cursors */

2021-01-11T11:34:38Z

Using SVG Cursors

← Older revision		Revision as of 11:34, 11 January 2021
Line 63:		Line 63:
	==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 ==

Tavmjong at 07:40, 21 October 2020

2020-10-21T07:40:42Z

← Older revision		Revision as of 07:40, 21 October 2020
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>
			<?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==

	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 ==		== Notes ==

Tavmjong: /* Creating SVG Cursors */

2020-10-21T07:14:21Z

Creating SVG Cursors

← Older revision		Revision as of 07:14, 21 October 2020
Line 21:		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.

Moini: Auto-note-formatting

2020-10-20T11:14:43Z

Auto-note-formatting

← Older revision		Revision as of 11:14, 20 October 2020
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.[1~~][2]~~		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 28:		Line 29:
	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.

	~~[1] Due to GTK issues, cursors on OSX do not currently benefit from better scaling.<br/>~~		== Notes ==
	~~[2] With GTK's experimental fractional scaling, cursors are rendered too large at scaling above 1.~~		{{reflist}}

	</div>		</div>

Tavmjong: Created page with "
=A Primer to SVG Cursors= ==Introduction== Inkscape 1.1 uses SVG cursors, replacing the previously used bitmaps. This allows more detailed cursors..."

2020-10-20T09:26:43Z

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..."

New page

<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 that scale better on HiDPI screens.[1][2]
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).
# 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.

==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.

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

</div>

SVG Cursors - Revision history

Adambelis: /* Using SVG Cursors */

Tavmjong at 07:40, 21 October 2020

Tavmjong: /* Creating SVG Cursors */

Moini: Auto-note-formatting

Tavmjong: Created page with " =A Primer to SVG Cursors= ==Introduction== Inkscape 1.1 uses SVG cursors, replacing the previously used bitmaps. This allows more detailed cursors..."

Tavmjong: Created page with "
=A Primer to SVG Cursors= ==Introduction== Inkscape 1.1 uses SVG cursors, replacing the previously used bitmaps. This allows more detailed cursors..."