The stroke-width property controls the visual thickness of a shape's outline in SVG and related CSS usage. It determines how much of the drawing plane is occupied by the stroke that traces a path, effectively setting the perpendicular distance from the path centerline to the outer edge of the painted stroke. Because the stroke is centered on the path geometry, changes to stroke-width alter the apparent weight of lines and shapes, affecting legibility, emphasis, and the overall balance between fill and outline in a graphic.

Changing stroke-width affects more than just appearance: it influences the rendered bounding box of an element and therefore can alter layout, clipping, and hit-testing. Thicker strokes increase the visual footprint of shapes and may cause them to overflow their viewboxes or overlapping neighbors. The way corners and line ends look is tightly coupled with the stroke thickness and with join/cap styles — for example, joins and end caps will scale and interact with a wide stroke in ways governed by stroke-linejoin and stroke-linecap. Dashed or dotted strokes are also affected because dash lengths and gaps are rendered relative to the stroke, so patterns defined by stroke-dasharray will visually change as thickness changes. The stroke color and transparency remain independent but work together with thickness to define contrast and visual hierarchy — see stroke.

When scaling graphics, stroke-width can be a critical factor for preserving intended appearance: transforms applied to a shape will normally scale the stroke along with the geometry, which can make thin strokes become very thick (or vice versa). Where you need the stroke to remain a consistent device-size regardless of geometric scaling, the vector-effect setting provides a way to control that behavior. Practical considerations include the visual crispness of hairline strokes on pixel grids and performance implications of animating stroke thickness; animating stroke width can be more expensive than transforming elements because it can trigger re-rendering of complex shapes. Finally, because stroke contributes to hit area, designers sometimes use stroke thickness intentionally to increase target size for interaction while keeping fill geometry unchanged.