9.4 Dash Patterns

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:

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.

SVG

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

The effect of stroke caps on dashes

Figure 9-6. The effect of stroke caps on dashes

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.

Using a dash array with large intervals to imitate a random scattering of dots

Figure 9-7. Using a dash array with large intervals to imitate a random scattering of 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:

Dashed spirals are a form of art.

Figure 9-8. Dashed spirals are a form of art.