Stroke Width

For a single-pixel stroke, all we need to do is set the color in stroke. If you need to control the width of the stroke, then you can do this using the stroke-widthproperty, an attribute, or via CSS:

<circle r="60" cx="150" cy="50%" fill="none" stroke="orange"
stroke-width="5"></circle>

or:

circle {
  stroke: orange;
  stroke-width: 5;
}

Result:

There is no shorthand notation, so the color and thickness are always set separately.

If you set the value as a percentage, it will not be calculated relative to the size of the shape, but to the size of the entire SVG, which can lead to unpredictable results.

If a stroke is assigned a particular width but no color, then the stroke will not be displayed.