Chapter 9. Stroke and Markers

While relatively rare in artistic drawings, stroked paths—outlines, frames, arrows, connectors, and so on—are very common in technical drawings such as drafts or flowcharts. A sizable share of all SVG style properties control the appearance of stroke, which therefore deserves a chapter of its own.

While stroking in SVG is quite rich and adequate for a lot of purposes, some things you may be looking for are simply not there, or are only available via workarounds. In particular, SVG stroke always has constant width (it cannot get wider or narrower along the path); to emulate variable-width stroke, use the Calligraphic pen (14.3 The Calligraphic Pen Tool) or path effects (13.1 Path Effects). Also, while stroke can have a dash pattern (9.4 Dash Patterns) and markers attached to its nodes (9.5 Markers), you cannot stroke a path with a brush or repeated pattern that would follow the bends of the stroke— although, again, this is possible via path effects (13.1.3 Pattern Along Path and Bend), and you can always apply the standard SVG rectangular pattern (10.8.1 Creating Patterns) to paint a stroke exactly as you would a fill (however, the pattern in this case is simply superimposed; it is not distorted to follow the trajectory of the stroke).