StrokeWidth

StrokeWidth refers to the thickness of the outline, or stroke, drawn around shapes, paths, or text in vector graphics. It is a fundamental property that affects how boldly a line or edge is rendered and is distinct from fill, which determines the interior color of a shape.

In SVG and related web technologies, the stroke width is specified as stroke-width and is a length value. Its default is 1 unit, which corresponds to the current user coordinate system. It can be written as a number (unitless, interpreted in user units) or as a length with units such as px, pt, em, or other CSS lengths. The stroke is typically centered on the path, so increasing the stroke width makes the line draw both inside and outside the path. When scaled, the stroke width may also scale unless the vector-effect: non-scaling-stroke setting is applied.

Stroke width can be set via attributes or CSS, for example stroke-width="2" or style="stroke-width: 2px". A stroke width of 0 hides the stroke. In addition to stroke-width, other properties such as stroke-linecap and stroke-linejoin determine the appearance of the stroke ends and corners, while vector-effect can influence how the width behaves under transforms.

In programming contexts, strokeWidth may be exposed as a DOM property (for example, element.style.strokeWidth) and, in canvas-based drawing, the analogous property is lineWidth on the drawing context. Differences between systems mean the exact syntax and units can vary, but the visual effect—thickness of the outline—remains the central concept.

Practical considerations include ensuring sufficient width for readability on small screens, accounting for device pixel ratio to avoid blurring, and choosing widths that complement fill color, line joins, and overall composition.