What does stroke-linecap='round' do to the ends of an open stroked path?

Adds a semicircular extension centered on each endpoint

Cuts the stroke off flush exactly at the endpoint with no extension

Rounds only the interior corners where segments meet, not the path ends

What does stroke-dashoffset control when used alongside stroke-dasharray?

The starting offset position of the dash pattern along the path

The overall thickness of each dash segment

The spacing between separate parallel strokes on the same path

Which stroke-linejoin value produces a flattened, cut-off corner where two path segments meet?

miter, which produces a sharp pointed corner

round, which extends the corner into a rounded point

If you apply a uniform scale transform to a shape, what happens to its visible stroke-width by default?

The stroke-width visually scales along with the shape's geometry

The stroke-width always stays a fixed pixel value regardless of scaling

The stroke disappears entirely because transforms don't apply to strokes

SVG Stroke

Learn to outline SVG shapes with the stroke attribute and shape the line using stroke-width, stroke-dasharray, and stroke-linecap.

The stroke Attribute

The stroke attribute paints a line along the outline of a shape's path, separately from its fill. Its default value is none, meaning a shape has no visible outline even though the underlying path exists — you must explicitly set stroke to a color for it to appear. Setting fill="none" alongside a stroke color is a common combination for drawing wireframes, icons, and diagrams where only the outline should be visible.

Basic Strokes

<!DOCTYPE html>
<html>
<body>

<svg width="220" height="100" viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="20" width="70" height="60" fill="none" stroke="steelblue" />
  <circle cx="140" cy="50" r="30" fill="none" stroke="crimson" />
</svg>

</body>
</html>

Controlling Line Thickness with stroke-width

The stroke-width attribute sets how thick the outline is, measured in user units, with a default of 1. By default the stroke is drawn centered on the path — half its width extends inward and half extends outward — so a large stroke-width on a small shape can noticeably grow or shrink the shape's apparent size. Thicker strokes are useful for emphasis, while thin strokes suit fine technical drawings.

Comparing Stroke Widths

<!DOCTYPE html>
<html>
<body>

<svg width="260" height="100" viewBox="0 0 260 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" fill="none" stroke="#333" stroke-width="1" />
  <circle cx="130" cy="50" r="30" fill="none" stroke="#333" stroke-width="6" />
  <circle cx="210" cy="50" r="30" fill="none" stroke="#333" stroke-width="12" />
</svg>

</body>
</html>

Dashed and Capped Lines

The stroke-dasharray attribute breaks a solid line into a repeating pattern of dashes and gaps, defined as a comma- or space-separated list of lengths. The stroke-linecap attribute controls the shape drawn at the open ends of a path — this is especially visible on dashed lines and open paths like a single <line> element, since each dash segment has its own two ends.

stroke-dasharray="5" — equal 5-unit dashes and 5-unit gaps
stroke-dasharray="10,5" — 10-unit dashes separated by 5-unit gaps
stroke-linecap="butt" — a flat edge exactly at the end of the path (the default)
stroke-linecap="round" — a rounded cap extending half the stroke-width beyond the path
stroke-linecap="square" — a flat cap extending half the stroke-width beyond the path

Dashes with Different Line Caps

<!DOCTYPE html>
<html>
<body>

<svg width="260" height="140" viewBox="0 0 260 140" xmlns="http://www.w3.org/2000/svg">
  <line x1="20" y1="30" x2="240" y2="30" stroke="#333" stroke-width="10" stroke-dasharray="20,15" stroke-linecap="butt" />
  <line x1="20" y1="70" x2="240" y2="70" stroke="#333" stroke-width="10" stroke-dasharray="20,15" stroke-linecap="round" />
  <line x1="20" y1="110" x2="240" y2="110" stroke="#333" stroke-width="10" stroke-dasharray="20,15" stroke-linecap="square" />
</svg>

</body>
</html>

Note: A related property, stroke-linejoin (miter, round, or bevel), controls how corners are drawn where two segments of a path meet — try it on a <polygon> or <polyline> to see sharp versus rounded corners.

Note: Because strokes are centered on the path by default, a thick stroke-width can push the visible edges of a shape well outside its nominal x/y/width/height box — leave extra padding in your viewBox so thick outlines don't get clipped.

Attribute	Purpose
stroke	Sets the paint (color, gradient, or pattern) used for a shape's outline
stroke-width	Sets the thickness of the outline in user units
stroke-dasharray	Defines a repeating dash/gap pattern instead of a solid line
stroke-linecap	Shapes the ends of open paths and dash segments: butt, round, or square
stroke-linejoin	Shapes the corners where path segments meet: miter, round, or bevel

Exercise: SVG Stroke

If no stroke is specified on an SVG shape, what is drawn by default?

Keep Going

SVG Interview QuestionsPractice real questions asked for SVG Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to SVG and tweak your resume