A stroke does not need to run solidly from end to end of a path. SVG allows you to stroke a path with a regular pattern of dashes separated by empty intervals of any length. If you know how to edit raw SVG (for example, using Inkscape’s XML Editor, 4.7 The XML Editor), you can create any pattern you like. Otherwise, you can choose one of the many predefined patterns provided by the Fill and Stroke dialog, as shown in Figure 9-5.
Ordered roughly from the most common to the most exotic, these patterns include:
Dotted patterns that consist of dots (i.e., stroked segments whose length is equal to stroke width) with intervals equal to 1, 2, 3, 4, 6, and so on up to 48 stroke widths (this means the pattern scales up or down proportionally when you make your stroke wider or narrower).
Patterns with long dashes (1, 2, 3, and so on up to 24 stroke widths) and single-stroke width intervals.
Patterns with equal dash and interval lengths, from 2 to 24 stroke widths.
Patterns with varying dash and interval widths: 2:4, 4:2, 2:6, 6:2, 2:8, and 8:2.
Patterns where a long dash is followed by a short one.
Patterns with equal dash and interval lengths that are shorter than stroke width, from 0.5 down to 0.02 stroke widths (for example, a “square” path which is as long as it is wide will have 25 repetitions of the 0.02:0.02 pattern). Note that using such high-frequency patterns may slow Inkscape down considerably.
The editable field next to the dash pattern selector allows you to shift the chosen pattern along the path, again in units of stroke width.
In SVG, the dash pattern of a stroke is specified in the stroke-dasharray
property. It can take values of none
(solid line) or a comma-separated list of values where each odd value gives the length of a dash and each even value gives the length of an interval. For example, a specification of stroke-dasharray:2,1,0.5,1
means that the dash of length 2 is followed by an interval of length 1, which is followed by a short dash of 0.5 and another interval of 1 (all lengths are in the units of stroke width).
The list of the predefined dash patterns available in the Fill and Stroke dialog is stored in your preferences.xml file, inside the group
element with id="dashes"
. By editing the children of this element you can add, remove, or change the patterns available in the Inkscape UI.
Note that the stroke caps (9.3 Caps) affect dashes, too. If you set a path to use round or square caps, they will be added to both ends of each dash. As a result, each dash will become longer by one full stroke width compared to its length when using the default butt caps. For example, the 1:1 pattern with round caps loses all its intervals; the round caps of adjacent dashes, each cap 0.5 stroke widths in length, now touch each other, as shown in Figure 9-6.
As a consequence, to create a pattern of round dots following a path, you need to create a dash pattern with zero-length dashes and round caps. Unfortunately, Inkscape does not list such a pattern in the Fill and Stroke dialog; you will need to create it manually by first assigning a pattern with the interval length you need and then editing the stroke-dasharray
property in the style
attribute of the corresponding path element to set its dash length (first value) to 0. Note, however, that without round or square caps, such a pattern will render the path completely invisible (which is the main reason it is not among the standard patterns—remember that the default caps setting is butt).
One interesting use of dot patterns with very wide intervals (such as 1:48) is quickly creating a random scattering of dots. Draw a quick spiral-like doodle with the Pencil tool (14.2 The Pencil Tool) and assign a 1:48 dash pattern to it to turn it into a cloud of seemingly unconnected dots.
Also, the regularity of dash patterns plays nicely with spirals—a shape which is also regular but consists of progressively longer and longer turns (11.6 Spirals). An interplay of the equidistant dashes and gradually devolving paths can produce interesting patterns: