Guide · Styling
Paint is a separate decision from geometry.
Fill, stroke, opacity, and gradients are edited independently, so one shape can be evaluated in more than one presentation.
Turn fill and stroke on and off independently.
Fill and stroke each have their own switch, and each has its own custom colour switch. Turning the custom colour off is not the same as removing the paint: the paint stays and follows the document main ink colour instead.
That behaviour is what makes a single-colour icon set practical. Design once, change the ink colour, and every shape that never asked for its own colour follows.
- Independent fill and stroke switches
- Custom colour per fill and per stroke
- Without a custom colour, paint follows the main ink colour
A future annotated screenshot will identify paint type, colour, opacity, and stroke controls.
Choose the fill rule, then the opacities.
The fill rule is nonzero or evenodd. Nonzero counts signed crossings and therefore depends on subpath direction; evenodd counts crossing parity and does not. A shape with holes can look completely different under the two rules.
Fill opacity, stroke opacity, and overall opacity are separate values, and embedded images have their own image opacity. Keeping them apart means a faded outline does not force a faded fill.
- nonzero or evenodd fill rule
- Separate fill, stroke, and overall opacity
- Independent image opacity for embedded images
Width, cap, join, and dashes shape the stroke.
Stroke width is joined by the cap style, butt, round, or square, and the join style, miter, round, or bevel. These decide what happens at the ends of an open path and at every corner, which is where most stroke surprises come from.
The dash pattern is entered as a sequence of numbers, such as four then two. It is worth checking a dashed stroke at the final size, because the pattern is measured in user units and does not scale with the viewer.
- Caps: butt, round, square
- Joins: miter, round, bevel
- Dash pattern given as a number sequence
Switch a paint to a linear or radial gradient.
The paint type control switches between a solid colour, a linear gradient, and a radial gradient. A linear gradient exposes its x1, y1, x2, and y2 coordinates; a radial gradient exposes cx, cy, r and the focal fx, fy, fr.
The coordinate system can follow the object bounds or the canvas coordinates, the spread method can pad, reflect, or repeat, and a gradient transform matrix is available for a placement the plain coordinates cannot describe.
- Object bounds or canvas coordinate systems
- Pad, reflect, or repeat spread
- Full gradient transform matrix
Stops carry the colour of the gradient.
Stops can be added and removed, and each one has a colour, a position between zero and one, and its own opacity. A gradient that fades out is a stop with reduced opacity, not a second overlaid shape.
On export, gradients are written under defs with deterministic identifiers and referenced from fill or stroke by a local URL. Stops that follow the main ink colour are written as currentColor like any other inherited paint.
- Colour, position, and opacity per stop
- Deterministic gradient identifiers in defs
- Inherited stops exported as currentColor