stroke
Outline paint
Adds visible outline colour to SVG shapes and paths.
SVG Stroke
Overview
What You’ll Learn
SVG stroke paints the outline around shapes and paths. This tutorial covers stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset, five worked examples, and how stroke compares with fill, borders, and filters.
stroke-width
Thickness
Controls how thin or bold the outline appears.
linecap
Stroke ends
Choose flat, rounded, or square ends on open paths.
linejoin
Corners
Control how sharp or soft corners look where segments meet.
Dash Pattern
stroke-dasharray
Create dashed, dotted, or mixed outline patterns.
Dash Offset
Shift pattern
Move the dash pattern for animation and alignment effects.
Introduction
SVG stroke is the paint used for an outline. If you add stroke to a rectangle, circle, line, polyline, polygon, or path, the browser draws a visible border-like edge around that vector shape.
Unlike CSS borders, SVG strokes follow the actual geometry of the shape. That means the same stroke system works on straight lines, rounded circles, sharp polygons, and curved paths.
Why it matters?
Stroke is one of the main tools for making SVG graphics readable. It helps define edges, improve contrast, show paths, and build icon systems that stay sharp at any size.
Key Highlights
Works on Shapes
Use stroke on rectangles, circles, ellipses, polygons, and more.
Works on Paths
Open lines and complex curves can all be outlined the same way.
Styles the Edge
Colour, thickness, dashes, and rounded ends all come from stroke properties.
Easy to Animate
Dash patterns and dash offset are popular for draw-on effects.
In short: fill paints the inside, stroke paints the edge.
Foundation
📝 Syntax
Basic stroke usage on an SVG shape:
index.html
<svg width="220" height="120">
<rect x="20" y="20" width="180" height="80"
fill="none"
stroke="#2563eb"
stroke-width="6" />
</svg>Core stroke attributes
| Attribute | Type | Description |
|---|---|---|
stroke | Paint / colour | Sets the outline colour or paint source. |
stroke-width | Length / number | Sets the thickness of the outline. |
stroke-linecap | Keyword | Controls the ends of open strokes: butt, round, or square. |
stroke-linejoin | Keyword | Controls corners: miter, round, or bevel. |
stroke-dasharray | List | Creates dash and gap patterns. |
stroke-dashoffset | Length / number | Shifts the dash pattern along the path. |
Stroke-friendly elements
| Element | Works with stroke? | Notes |
|---|---|---|
<rect> | Yes | Common for panels, buttons, and boxes. |
<circle> | Yes | Useful for rings, badges, and outlines. |
<line> | Yes | Relies on stroke to be visible. |
<polyline> / <polygon> | Yes | Great for joins, corners, and outlined shapes. |
<path> | Yes | The most flexible element for custom stroke art. |
Minimal workflow
index.html
<!-- 1. Pick a shape -->
<circle cx="70" cy="70" r="40"
fill="none"
stroke="#0f172a"
stroke-width="6" />
<!-- 2. Optional extras -->
<!-- stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset -->Cheat Sheet
⚡ Quick Reference
| Goal | Code |
|---|---|
| Set outline colour | stroke="#2563eb" |
| Make it thicker | stroke-width="6" |
| Round line ends | stroke-linecap="round" |
| Round corners | stroke-linejoin="round" |
| Dashed outline | stroke-dasharray="10 6" |
| Shift dash pattern | stroke-dashoffset="8" |
Compare
📋 Stroke vs Fill vs Border vs Filter
These tools can all affect appearance, but they solve different SVG jobs.
Stroke
outline paintFollows the exact vector edge of an SVG shape or path.
Fill
inside paintColours the interior area of a closed shape.
CSS Border
box edgeWorks on HTML boxes, not on SVG path geometry.
Filter
effect layerAdds blur, shadow, glow, and other visual effects after painting.
Context
When to Use Stroke
Use stroke when the edge of the SVG matters as much as the shape itself.
Outlined shapes
Use it for rectangles, circles, and badges that need a visible edge.
Paths and curves
Essential when drawing signatures, routes, waves, or custom icons.
Lines and connectors
Lines are invisible without stroke, so it is required there.
Dashed emphasis
Great for selections, guides, cut lines, routes, and animated attention cues.
Not for interior colour
If you want the inside painted, use
filltoo, not stroke alone.
Key benefit: stroke follows the real vector edge, so it works equally well on simple shapes and complex paths.
Hands-On
Examples Gallery
Five beginner-friendly examples using SVG stroke. Click View Output to preview, or Try It Yourself to edit live.
📚 Getting Started
Start with colour and width, then compare end and corner styles.
Example 1 — Basic Stroke Colour and Width
Apply a visible outline to a rectangle and a line by setting stroke and stroke-width.
index.html
<svg width="260" height="150" viewBox="0 0 260 150">
<rect x="20" y="20" width="90" height="70"
fill="none"
stroke="#2563eb"
stroke-width="6" />
<line x1="140" y1="100" x2="230" y2="40"
stroke="#f97316"
stroke-width="8" />
</svg>How It Works
The rectangle keeps its inside empty because of fill="none". The line appears only because stroke paint is present.
Example 2 — Compare stroke-linecap
Open strokes can end in flat, round, or square shapes.
index.html
<svg width="240" height="140">
<line x1="40" y1="30" x2="200" y2="30"
stroke="#64748b" stroke-width="12" stroke-linecap="butt" />
<line x1="40" y1="70" x2="200" y2="70"
stroke="#10b981" stroke-width="12" stroke-linecap="round" />
<line x1="40" y1="110" x2="200" y2="110"
stroke="#3b82f6" stroke-width="12" stroke-linecap="square" />
</svg>How It Works
butt ends exactly at the path endpoint, round adds a semicircle, and square extends half a stroke-width past the end.
📈 Practical Patterns
Corners, dashes, and shifted patterns for more expressive outlines.
Example 3 — Compare stroke-linejoin
Line joins matter most on angled shapes like polylines and polygons.
index.html
<svg width="300" height="120" viewBox="0 0 300 120">
<polyline points="20,90 70,25 120,90"
fill="none" stroke="#ef4444" stroke-width="12"
stroke-linejoin="miter" />
<polyline points="130,90 180,25 230,90"
fill="none" stroke="#10b981" stroke-width="12"
stroke-linejoin="round" />
<polyline points="240,90 270,25 300,90"
fill="none" stroke="#3b82f6" stroke-width="12"
stroke-linejoin="bevel" />
</svg>How It Works
miter creates a sharp corner, round softens the corner, and bevel cuts the point off with a flat edge.
Example 4 — Dashed Line with stroke-dasharray
Dash arrays alternate visible stroke and gap lengths.
index.html
<svg width="260" height="100" viewBox="0 0 260 100">
<line x1="20" y1="50" x2="240" y2="50"
stroke="#b45309"
stroke-width="8"
stroke-linecap="round"
stroke-dasharray="14 10" />
</svg>How It Works
14 10 means 14 units of visible stroke followed by 10 units of gap, repeated until the path ends.
Example 5 — Shift Dashes with stroke-dashoffset
Move the same dash pattern to create a changed starting point or a simple motion effect.
index.html
<svg width="260" height="130" viewBox="0 0 260 130">
<rect x="40" y="20" width="180" height="90" rx="18"
fill="none"
stroke="#7c3aed"
stroke-width="10"
stroke-linejoin="round"
stroke-linecap="round"
stroke-dasharray="18 10"
stroke-dashoffset="12" />
</svg>How It Works
The dash sizes stay the same, but stroke-dashoffset shifts where the first dash begins. That is why the pattern looks moved around the outline.
Use Cases
Real-world places where SVG stroke is especially useful.
1. Icon Outlines
Build clean icon systems using consistent stroke width and rounded caps.
Example: plus, close, and arrow icons.
2. Rings and Badges
Outline circles and rounded shapes without filling the inside.
Example: status ring around an avatar.
3. Guides and Selections
Dashed outlines are easy to spot and communicate temporary boundaries.
Example: drag-and-drop selection box.
4. Curved Paths
Stroke makes custom paths readable without needing a fill.
Example: route line on a small map graphic.
5. Charts and Diagrams
Trend lines, connectors, and axis marks all depend on stroke.
Example: sparkline chart path.
6. Draw-on Animations
Dash arrays and dash offset are widely used to fake hand-drawn motion.
Example: logo path that appears to draw itself.
Pro Tip: if the inside of the shape is distracting, add fill="none" so the stroke becomes the main visual focus.
Advantages
Why SVG stroke is a strong choice for vector styling.
1. Precise Outline Control
You can style the exact edge of a vector shape, not just a box boundary.
2. Works Across Many Elements
The same stroke properties work on lines, shapes, and complex paths.
3. Rich Built-in Styling
Dashes, rounded ends, sharp joins, and variable width come built in.
4. Keeps Graphics Crisp
Strokes stay sharp on high-density displays because SVG is vector based.
5. Easy to Animate
Dash properties make it easy to create motion without replacing the artwork.
Pro Tip: using stroke="currentColor" helps stroked icons automatically match surrounding text colour.
Usage Tips
Small habits that make stroked SVG graphics look cleaner.
1. Use
fill="none"for pure outlinesThis keeps attention on the edge and avoids accidental fill colour.
2. Prefer round caps for UI-friendly lines
Rounded ends often feel softer and more polished than sharp ones.
3. Match joins to the style
Use
roundfor soft icons andbevelormiterfor sharper geometry.4. Keep dash values readable
Extreme dash and gap values can make outlines look uneven or noisy.
5. Leave room for thick strokes
Part of the width extends outward, so place shapes away from the SVG edge.
Pro Tip: for sets of icons, reusing the same stroke-width, line caps, and joins creates a more consistent visual language.
Common Pitfalls
These mistakes often cause SVG strokes to look wrong or disappear.
1. Forgetting
strokeShapes may still show because of fill, but lines and many examples will appear missing.
→ Always set a stroke colour when the outline matters.
2. Using a stroke that is too thin
Very small widths can disappear on dense or scaled-down artwork.
→ Increase
stroke-widthuntil the outline reads clearly.3. Clipping thick outlines
Half the stroke sits outside the path, so edges may get cut off near the viewBox boundary.
→ Add padding around the shape or make the viewBox larger.
4. Overcomplicated dash patterns
Too many numbers make dashed outlines hard to reason about.
→ Start with simple patterns like
8 6or12 8.5. Wrong join choice for the design
Sharp miters can look harsh, while round joins can feel too soft for technical drawings.
→ Choose joins based on the visual style you want.
Pro Tip: if a stroked element looks wrong, check three things first: the stroke colour, the stroke width, and whether the outline has enough room inside the viewBox.
🧠 How Stroke Is Applied
1
Draw or choose an SVG shape
Start with an element such as <rect>, <circle>, <line>, or <path>.
Shape
2
Add stroke paint
Set stroke to a colour or paint source so the browser knows how to draw the edge.
Paint
3
Set stroke width
Use stroke-width to decide how bold the edge should be. Half the width extends on each side of the path.
Width
4
Refine caps, joins, and dashes
Use stroke-linecap, stroke-linejoin, stroke-dasharray, and stroke-dashoffset for the final look.
Style
=
A styled, scalable outline
The browser paints the edge live from vector geometry, so the result stays clean at different sizes.
Important Notes
- Open elements like
<line>depend on stroke to be visible. - Closed shapes can use both
fillandstrokeat the same time. stroke-linecapaffects only open strokes, not the corners of closed shapes.stroke-linejoinmatters most on paths, polylines, and polygons with visible corners.stroke-dasharrayandstroke-dashoffsetwork together for dashed animation effects.- Rounded joins and caps often look better in UI icons, while miters suit technical drawings.
Quick Takeaway: stroke is the edge paint system for SVG. Start with colour and width, then refine ends, corners, and dash behavior.
Compatibility
Browser Support
SVG stroke properties are supported in all modern browsers as part of core SVG rendering, including shape outlines, dash patterns, line caps, and joins.
SVG 1.1+
SVG Stroke
Use stroke on inline SVG or external .svg files. Outline colour, width, caps, joins, and dashes work consistently across Chrome, Firefox, Safari, Edge, and mobile browsers.
100% Modern browsers
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 6+ · Legacy environments
Full supportOpera All modern versions
Full supportstroke Universal
Bottom line: Safe for production use. You can rely on SVG stroke styling without polyfills in current browsers.
🎉 Conclusion
SVG stroke is the tool that paints edges. Once you know stroke, stroke-width, caps, joins, and dash controls, you can style almost any outline in beginner-friendly, reusable ways.
Practice with the five examples above, then continue to SVG Filters when you want to add blur, shadow, glow, and other effects on top of your stroked artwork.
Use fill for the inside, stroke for the edge, and filters only after your base stroke styling already looks right.
Pro Tips
💡 Best Practices
✅ Do
- Use
fill="none"when you want a pure outline - Keep stroke widths consistent across related SVG icons
- Use
stroke-linecap="round"for softer UI strokes - Choose dash values that stay readable at the final size
- Test thick strokes to make sure they do not clip
❌ Don’t
- Rely on fill alone when the outline communicates important meaning
- Mix random cap and join styles inside one icon family
- Use overly thin strokes for tiny or dense artwork
- Create complex dash patterns before trying simple ones first
- Jump to filters before the base stroke styling is solid
Summary
Key Takeaways
Knowledge Unlocked
Five things to remember about SVG stroke
Outline your SVG graphics with confidence.
5
Core concepts 01
Stroke
Paints the edge
Paint 02
Width
Controls thickness
Size 03
Caps & Joins
Shape ends and corners
Style 04
Dashes
Use dasharray and offset
Pattern 05
Works Broadly
Shapes and paths alike
Reuse❓ Frequently Asked Questions
stroke paints the outline of an SVG shape or path. You can control its colour, width, dash pattern, and how corners and line ends look.
stroke-width sets the thickness of the outline. Larger values make the stroke appear bolder around shapes and paths.
stroke-linecap controls the ends of open strokes such as lines and paths. The values are butt, round, and square.
stroke-linejoin controls the corners where two stroke segments meet. The common values are miter, round, and bevel.
Use stroke-dasharray to define the dash and gap pattern. You can also use stroke-dashoffset to shift where the pattern starts.
stroke-dashoffset moves the dash pattern forward or backward along the path. It is useful for aligning dashed outlines or creating draw-on animation effects.
Did you Know? 🔊
SVG stroke paints the outline of a shape or path. It works on basic shapes like <rect> and <circle>, and also on open or curved paths such as <line>, <polyline>, and <path>. That is why one stroke system can style everything from simple icons to animated signature paths.
Continue to SVG Filters
Once your stroke styling is in place, learn how filters add glow, blur, shadows, and more advanced finishing effects.
About the author
8 people found this page helpful