How the SVG Stroke Property Defines Outlines

The stroke property in Scalable Vector Graphics (SVG) is the fundamental styling mechanism used to draw and customize the visible outline or border of shapes, lines, paths, and text. This article explains how the stroke property functions, details the primary sub-properties used to control its appearance, and demonstrates how to apply these rules using SVG attributes or standard CSS.

The Core Function of the Stroke Property

In SVG, visual elements consist of two primary render layers: the fill (the interior area) and the stroke (the exterior path or border). The stroke property determines the paint applied to the line along the perimeter of a shape or path. Without a defined stroke, open lines (like <line> or <polyline>) remain invisible, and closed shapes rely entirely on their fill.

A basic stroke is defined by assigning a color value (such as a named color, hex code, RGB, HSL, or a gradient URL):

<rect width="100" height="100" stroke="#007acc" fill="none" />

Essential Stroke-Related Properties

To control the geometry, thickness, and style of an outline, SVG provides several accompanying stroke properties:

1. stroke-width

Sets the thickness of the outline. The value can be a unitless number (interpreted as pixels) or include CSS units like px, em, or %. The stroke is centered on the path, expanding equally inward and outward.

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" />

2. stroke-opacity

Controls the transparency level of the border independently from the fill-opacity or overall element opacity. Values range from 0.0 (fully transparent) to 1.0 (fully opaque).

3. stroke-linecap

Defines the visual appearance at the ends of open paths. There are three options: * butt (default): Ends the stroke squarely at the exact coordinates of the path end. * round: Extends the stroke beyond the endpoint with a semicircular cap. * square: Extends the stroke beyond the endpoint with a square cap equal to half the stroke-width.

4. stroke-linejoin

Determines how corners or intersections between two path segments are rendered: * miter (default): Forms a sharp, pointed corner. * round: Smooths the corner with a rounded edge. * bevel: Chams or cuts off the sharp corner at an angle.

5. stroke-dasharray and stroke-dashoffset

• stroke-dasharray: Converts a solid line into a pattern of dashes and gaps by specifying a list of comma- or space-separated lengths.
• stroke-dashoffset: Shifts the starting position of the dash pattern along the path, which is commonly used to create line-drawing animations via CSS.

Applying Stroke via CSS

SVG stroke properties can be written directly as presentation attributes within SVG markup or controlled via external and inline CSS stylesheets:

.custom-border {
  stroke: #e63946;
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-dasharray: 5, 10;
}

This flexibility allows developers to dynamically style and animate vector borders based on user interactions, theme states, or viewport changes.