SVG Stroke

Beginner
⏱️ 8 min read
📚 Updated: Aug 2025
🎯 2 Examples
Styling
SVG stroke tutorial illustration showing stroke width, caps, joins and dashes

What You’ll Learn

In SVG, stroke styles the outline of shapes and paths. Stroke properties control colour, thickness, line ends, corners, and dash patterns.

This page explains the most useful stroke properties and shows practical examples you can copy into your SVGs.

⚡ Quick Reference — Stroke Properties

Colour stroke

Outline colour

Width stroke-width

Outline thickness

Ends stroke-linecap

butt / round / square

Corners stroke-linejoin

miter / round / bevel

Dashes stroke-dasharray

Dash/gap pattern

Dash offset stroke-dashoffset

Shift the dash pattern

Basic Syntax
<element
  stroke="#0f172a"
  stroke-width="4"
  stroke-linecap="round"
  stroke-linejoin="round"
  stroke-dasharray="8 6"
/>

👀 Live Preview — Caps, Joins & Dashes

These quick previews show how stroke settings change the look of outlines.

Line caps
Line joins
Dash pattern
1

Stroke on Multiple Shapes

A rectangle, circle, and line each use different stroke settings.

index.html
<svg width="240" height="200" viewBox="0 0 240 200">
  <rect x="20" y="26" width="90" height="70" fill="none" stroke="red" stroke-width="5" />

  <circle cx="170" cy="62" r="34" fill="none" stroke="blue" stroke-width="4" stroke-linecap="round" />

  <line x1="20" y1="150" x2="220" y2="150"
        stroke="#10b981" stroke-width="8" stroke-linecap="round" stroke-dasharray="14 10" />
</svg>
Try It Yourself
2

Dash Offset (Animated Look Without Animation)

stroke-dashoffset shifts the dash pattern along the path. It’s the key property used in many stroke animations.

index.html
<svg width="240" height="120" viewBox="0 0 240 120">
  <line x1="20" y1="40" x2="220" y2="40"
        stroke="#f97316" stroke-width="10" stroke-linecap="round"
        stroke-dasharray="18 12" stroke-dashoffset="0" />

  <line x1="20" y1="80" x2="220" y2="80"
        stroke="#f97316" stroke-width="10" stroke-linecap="round"
        stroke-dasharray="18 12" stroke-dashoffset="14" />
</svg>

💡 Best Practices

Do

  • Use stroke-linecap="round" for friendly UI strokes
  • Use consistent stroke-width across related icons
  • Set fill="none"
  • Use stroke-dasharray for dashed and dotted lines
  • Use stroke-dashoffset for animated dash effects

Don’t

  • Forget stroke on lines and polylines (they won’t show)
  • Use huge stroke widths without expanding the viewBox/canvas
  • Mix stroke caps/joins randomly across one icon set
  • Overuse heavy dash patterns in dense charts
  • Hide focus/hover styling on interactive stroked elements

❓ Frequently Asked Questions

stroke draws the outline of a shape. You control its colour, width, dash pattern, and corner/endpoint styles.
It sets the thickness of the outline. Larger values produce thicker strokes.
It controls line ends: butt (flat), round (rounded), or square (extends past the end).
It controls corners where segments meet: miter, round, or bevel.
Use stroke-dasharray for dash/gap lengths, and stroke-dashoffset to shift the pattern.

Add Labels with SVG Text

Next, learn how to render text, align it, and style it inside an SVG.

SVG Text →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

4 people found this page helpful

SVG Rectangle SVG Text