Theme SVG File

The SVG file used to specify a toolkit theme is arranged so that individual GUI elements are stored within specifically named inkscape layers.

The extraction script produces PNG snapshots of known layers and can also measure gadget sizes. Area measurements are needed to specify free-form packing areas within gadgets (called "Arenas") which can be used to nest GUI elements. Objects purely meant for measurements are best put into "(invisible)" layers, so they don't have an impact on snapshot images.

Layers are arranged in a hierarchical structure which mimicks gadgets and assorted states or properties. So example layers are Button, Button/Normal, Button/Pressed.

Useful inkscape properties for theme SVG files:

	dpi:		90
	units:		pixels
	size:		320x200
	pixel raster:	10/5
	stroke-width:	1

Layers

Layers marked "(invisible)" will be disabled before generating gadget image snapshots.

Palette specification

Uniformly colored objects should be used to represent palette colors. The center pixels of a palette color object are used to extract color palette meta-data. Palette layer names are:

• Palette/Foreground
• Palette/Background
• Palette/Focus
• Palette/Dark
• Palette/Light

Gadget identifiers

Note, interesting states are:

• None/Normal
• Active (Impressed)
• Can-Default / Has-Default
• Prelight
• Insensitive
• Focussed

Useful gadgets:

• Button Sublayers:
  • Normal - pictures a normal push button.
  • Pressed - pictures button in pressed state.
  • Arena (invisible) - signifies child container area.
• Frame Sublayers:
  • ShadowOut
  • ShadowIn
  • EtchedOut
  • EtchedIn
  • ChildGroup (defaults to EtchedIn)
  • Arena (invisible) - signifies child container area.
  Frame normally used to convey grouping of several input gadgets.
• RadioMark Sublayers:
  • On
  • Off
  • Any
• CheckMark Sublayers:
  • On
  • Off
  • Any
• Text Sublayers:
  • Entry
  • Arena (invisible) - signifies child container area.
• Arrow Sublayers:
  • Up
  • Down
  • Left
  • Right
• Expander Sublayers:
  • Up
  • Down
  • Left
  • Right
• Handle Sublayers:
  • Normal: (e.g. 6x2 dots)
• HSlider, VSlider, HScroller, VScroller Sublayers:
  • Trough (e.g. Frame/ShadowIn)
  • Skid (e.g. Frame/ShadowOut)
  • HSliderHandle (e.g. Handle)

Area identifiers

• Arena Usually an invisible layer. An SVG rectangle inside the gadget that is usable for packing inner contents (like children into a container).
• HStretch Optional layer, usually invisible. An SVG rectangle inside a gadget that specifies a horizontal region within, used for pixel stretching. Only the (x,width) coordinates of this element are used. If unspecified, the horizontally stretchable region is assumed to be roughly 1/5th of the width, centered.
• VStretch Optional layer, usually invisible. Analogous to HStretch, regarding the vertical dimension and the (y,height) coordinates.
• Background Optional layer, including any outer effects like drop shadows.

Tips

User interface elements should be drawn as small as possible, because the GUI element size in the standard SVG file effectively adds up to the minimum size of a GUI element. That's because the target layout logic is supposed to only stretch elements and avoid squeezing.