How do I set SVG stroke-linecap?

Choose butt, round, or square and click Set linecap. The value is written on every element that already has a stroke, including style attributes.

Why don’t caps show on a closed rectangle or circle?

Linecap only draws at open path ends. Closed shapes need stroke-linejoin for corners. Use an open path or polyline to see the cap.

Round adds a semicircle of radius stroke-width/2. Square adds a rectangle of length stroke-width/2. Butt stops exactly at the end point.

No. Use Change SVG Stroke Width or Change SVG Stroke Color for those. This page writes only stroke-linecap.

FAQ

Quick answers

How do I set SVG stroke-linecap?: Choose butt, round, or square and click Set linecap. The value is written on every element that already has a stroke, including style attributes.
Why don’t caps show on a closed rectangle or circle?: Linecap only draws at open path ends. Closed shapes need stroke-linejoin for corners. Use an open path or polyline to see the cap.
What is the difference between round and square caps?: Round adds a semicircle of radius stroke-width/2. Square adds a rectangle of length stroke-width/2. Butt stops exactly at the end point.
Does this change stroke width or color?: No. Use Change SVG Stroke Width or Change SVG Stroke Color for those. This page writes only stroke-linecap.

Source

Cap

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B