stroke-width

The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape.

You can use this attribute with the following SVG elements:

Example

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Default stroke width: 1 -->
  <circle cx="5" cy="5" r="3" stroke="green" />

  <!-- Stroke width as a number -->
  <circle cx="15" cy="5" r="3" stroke="green"
          stroke-width="3" />

  <!-- Stroke width as a percentage -->
  <circle cx="25" cy="5" r="3" stroke="green"
          stroke-width="2%" />
</svg>

Usage notes

Value <length> | <percentage>
Default value 1px
Animatable Yes

Note: A percentage value is always computed as a percentage of the normalized viewBox diagonal length.

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
stroke-width
?
?
?
?
?
?
?
?
?
?
?
?

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'stroke-width' in that specification.
Candidate Recommendation Definition for shapes and texts
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'stroke-width' in that specification.
Recommendation Initial definition for shapes and texts

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width