Line Caps and Joins in SVG

By mbystedt on Feb 26, 2014, 5:06:38 PM

Since strokes have a width, they create a shape. The shape of the line caps and the line joins are controlled by the stroke-linecap and stroke-linejoin attributes, respectively. Baring unreasonable expectations, the two attributes provide all the control over the shape of the stroke you should ever need. SVG uses a default for these attributes that probably pleasantly matches your expectation.

Line Caps

The stroke-linecap attribute defines the shape of the stroke at the start and end of lines. The attribute jointly controls the start and finish. This is used with paths and shapes like polygons.

stroke-linecap

Value	Comments
butt	Ends the stroke flush with the start or end of the line. This is the initial value.
round	Ends the line with a circle the diameter of the stroke.
square	Extends the line to match the stroke's thickness.
inherit	The default value.

<path id="capPath" d="M-25,-50 L25,0 L-25,50"  fill="none"/>
    ...
<use x="160px" y="70px" xlink:href="#capPath" stroke-linecap="butt" />
<use x="320px" y="70px" xlink:href="#capPath" stroke-linecap="round" />
<use x="480px" y="70px" xlink:href="#capPath" stroke-linecap="square" />

Example 1. All the types of line caps. The line is shown in blue.

Line Joins

The stroke-linejoin attribute defines the shape of the stroke used at the joints of paths and shapes like polygons. Like line caps, joints cannot be individually specified. The default is miter which extends the stroke to where the edges on each side bisect.

stroke-linejoin

Value	Comments
miter	Extends the stroke to where the edges on each side bisect. This is the initial value.
round	Rounds the outside edge with a circle the diameter of the stroke.
bevel	Cuts the outside edge off where a circle the diameter of the stroke intersects the stroke.
inherit	The default value.

<path id="joinPath" d="M-25,-50 L25,0 L-25,50"  fill="none"/>
    ...
<use x="160px" y="70px" xlink:href="#joinPath" stroke-linejoin="miter" />
<use x="320px" y="70px" xlink:href="#joinPath" stroke-linejoin="round" />
<use x="480px" y="70px" xlink:href="#joinPath" stroke-linejoin="bevel" />

Example 2. All the types of line joins. The line is shown in blue.

A miter join on a small angle would extend the stroke quite a distance from the line. The stroke-miterlimit attribute (default: 4) is compared against the ratio of miter length to stroke width. Any join that exceeds the limit is converted to a bevel join.

Example 3. Stroke-miterlimit Gallery. Each row has a progressively sharper angle and one more join is converted to a bevel.