apike.ca

Line Caps and Joins in SVG

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.
1
2
3
4
5
<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.
1
2
3
4
5
<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.
Related Topics