When should I use instead of or ?

Use for a single straight segment between two points. Use for a chain of connected segments, and when you need curves or mixed commands.

SVG <line> Element

Beginner

⏱️ 10 min read

📚 Updated: Aug 2026

🎯 5 Examples

🚀 5 Try-it labs

Basic Shape

SVG Line tutorial illustration showing x1, y1, x2, y2 and stroke styling

Overview

What You’ll Learn

SVG’s <line> draws a straight segment between two points. This tutorial covers x1, y1, x2, and y2, stroke styling (stroke, stroke-width, stroke-linecap, stroke-dasharray), responsive viewBox usage, five worked examples, and how <line> compares to <polyline> and <path>.

<line>

Core element

Place <line> inside an <svg> to draw one straight segment.

x1, y1

Start point

Set where the line begins on the SVG canvas.

x2, y2

End point

Set where the line ends — the segment connects start to end.

Stroke

Required paint

Lines have no fill — set stroke and stroke-width to see them.

Caps & Dashes

linecap / dasharray

Round ends, square caps, dashed and dotted patterns.

viewBox

Responsive

Scale lines cleanly with a viewBox and CSS sizing.

Introduction

SVG’s <line> is the simplest way to draw a straight edge: two points and a stroke. It powers chart axes, icon strokes, dividers, connectors, and guides in diagrams.

Unlike rectangles or circles, a line has no interior fill. Visibility comes entirely from presentation attributes like stroke and stroke-width — forget those and nothing appears.

Why it matters?

Raster lines blur when scaled. SVG lines stay sharp, stay tiny in markup, and can be dashed, capped, and themed with CSS just like other vector shapes.

Key Highlights

Four Coordinates

x1, y1, x2, and y2 fully define the segment.

Stroke Only

No fill — colour and thickness come from stroke attributes.

Caps & Dashes

Control ends with stroke-linecap and patterns with stroke-dasharray.

Scales With viewBox

One drawing scales to any CSS size without rewriting points.

In short: set start and end points, then paint the stroke — that’s the whole foundation of SVG lines.

Foundation

📝 Syntax

Basic form of the SVG line element:

index.html

<svg width="200" height="200">
  <line x1="50" y1="50" x2="150" y2="150"
        stroke="black" stroke-width="2" />
</svg>

Attributes

Attribute	Type	Description
`x1`	Length / number	x-coordinate of the start point. Defaults to `0`.
`y1`	Length / number	y-coordinate of the start point. Defaults to `0`.
`x2`	Length / number	x-coordinate of the end point. Defaults to `0`.
`y2`	Length / number	y-coordinate of the end point. Defaults to `0`.
`stroke`	Paint	Line colour — required for the line to be visible.
`stroke-width`	Length / number	Thickness of the stroke in user units.
`stroke-linecap`	Keyword	`butt`, `round`, or `square` end caps.
`stroke-dasharray`	List	Dash and gap lengths for dashed or dotted lines.

What It Draws

Result	Details
vector line segment	Renders a straight stroke from `(x1, y1)` to `(x2, y2)`.

Minimal workflow

index.html

<svg width="200" height="200" viewBox="0 0 200 200">
  <line x1="50" y1="50" x2="150" y2="150"
        stroke="#0f172a" stroke-width="2" />
</svg>

Coordinate tips

Idea	Detail	Notes
Origin	`(0, 0)` is top-left	y grows downward
Visibility	Needs `stroke`	`stroke-width` of `0` hides it
Same points	`x1===x2` and `y1===y2`	Zero-length line — usually invisible

Cheat Sheet

⚡ Quick Reference

Goal	Code
Basic line	`<line x1="50" y1="50" x2="150" y2="150" stroke="#0f172a" stroke-width="2" />`
Thick stroke	`stroke-width="6"`
Rounded ends	`stroke-linecap="round"`
Dashed line	`stroke-dasharray="8 6"`
Dotted line	`stroke-linecap="round" stroke-dasharray="0 10"`
Responsive SVG	`<svg viewBox="0 0 200 200">...` + CSS width

Compare

📋 `<line>` vs `<polyline>` vs `<path>` vs `<rect>`

All can create edges — pick the simplest element that fits.

<line>

one segment

Straight stroke between two points

many segments

Connected open chain of points

<path>

any shape

Curves, arcs, and mixed commands

<rect>

box edges

Filled or stroked rectangles — not single segments

Context

When to Use `<line>`

Reach for <line> whenever you need one straight vector segment.

Chart axes & grids
Baseline, tick marks, and guide lines in data graphics.
Icons & glyphs
Plus signs, close icons, arrows, and simple strokes.
Dividers & rules
Horizontal or diagonal separators in UI illustrations.
Connectors
Links between nodes in diagrams and flow charts.
Not for polylines
If you need many connected points, use <polyline>.

Key benefit: four coordinates and a stroke — the lightest straight edge in SVG.

Hands-On

Examples Gallery

Five starter snippets using <line>. Click View Output for a preview, or Try It Yourself to edit live.

📚 Getting Started

Draw a diagonal line, then thicken the stroke.

Example 1 — Basic Diagonal Line

Draw a line from (50, 50) to (150, 150) inside a 200×200 canvas.

index.html

<svg width="200" height="200">
  <line x1="50" y1="50" x2="150" y2="150"
        stroke="#0f172a" stroke-width="2" />
</svg>

Try It Yourself

How It Works

The stroke paints a segment between the two points. Without stroke, this same markup would draw nothing.

Example 2 — Thick Stroke

Increase stroke-width for bolder UI rules and icon strokes.

index.html

<svg width="220" height="80">
  <line x1="20" y1="40" x2="200" y2="40"
        stroke="#0f172a" stroke-width="8" />
</svg>

Try It Yourself

How It Works

Half of stroke-width sits on each side of the geometric line. Leave a little margin so thick strokes do not clip at the SVG edge.

📈 Practical Patterns

Caps, dashes, and responsive sizing.

Example 3 — Stroke Line Caps

Compare butt, round, and square end caps on the same geometry.

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>

Try It Yourself

How It Works

butt stops at the endpoint, round adds a semicircle, and square extends half a stroke-width past each end.

Example 4 — Dashed and Dotted Lines

Use stroke-dasharray for dashed rules, and combine it with round caps for dots.

index.html

<svg width="240" height="100">
  <line x1="20" y1="30" x2="220" y2="30"
        stroke="#b45309" stroke-width="4" stroke-dasharray="8 6" />
  <line x1="20" y1="70" x2="220" y2="70"
        stroke="#6d28d9" stroke-width="5"
        stroke-linecap="round" stroke-dasharray="0 10" />
</svg>

Try It Yourself

How It Works

8 6 means 8 units on, 6 off. A zero-length dash with a gap and round caps creates a dotted look.

Example 5 — Responsive Line With viewBox

Define coordinates in a viewBox, then let CSS control the displayed size.

index.html

<style>
  .rule { width: 160px; height: auto; display: block; }
</style>

<svg class="rule" viewBox="0 0 100 20"
     role="img" aria-label="Blue divider line">
  <line x1="4" y1="10" x2="96" y2="10"
        stroke="#2563eb" stroke-width="3" stroke-linecap="round" />
</svg>

Try It Yourself

How It Works

The viewBox maps user units to whatever CSS size you give the SVG. Change .rule { width } and the line scales without rewriting coordinates.

Use Cases

Real-world places where SVG lines show up every day.

1. Charts & Axes

Baselines, grid lines, and tick marks in data viz.

Example: x-axis under a bar chart.

2. Icons

Plus, minus, close, and arrow strokes.

Example: X close icon from two diagonals.

3. Dividers

Section rules and decorative separators.

Example: dashed rule under a heading.

4. Diagram Connectors

Edges between nodes in flow charts.

Example: link from box A to box B.

5. Layout Guides

Alignment helpers in design tools and demos.

Example: horizontal guide across a canvas.

6. Education

Geometry lessons teaching slope and distance.

Example: interactive point-to-point demos.

Pro Tip: for a chain of connected segments, switch to <polyline> instead of stacking many <line> elements.

Advantages

Why draw lines with SVG instead of borders or images.

1. Precise Geometry
Exact endpoints in any direction — not just horizontal CSS borders.
2. Resolution Independent
Stays sharp on retina screens without extra assets.
3. Rich Stroke Styling
Caps, dashes, and colours via attributes or CSS.
4. Tiny Markup
One element replaces PNG strokes for simple graphics.
5. Easy to Animate
Animate dashoffset, opacity, or endpoints for motion.

Pro Tip: for UI icons, stroke="currentColor" lets lines inherit the parent text colour for theming.

Usage Tips

Follow these practices for clean, scalable SVG lines.

1. Always Set a Stroke
Lines are invisible without stroke and a positive stroke-width.
2. Prefer Round Caps for UI
stroke-linecap="round" softens icon strokes and dividers.
3. Leave Room for Thickness
Thick strokes can clip — pad the canvas or pull endpoints inward.
4. Keep Widths Consistent
Match stroke widths across an icon set for a cohesive look.
5. Use viewBox for Scaling
Define geometry once, then size the SVG with CSS.

Pro Tip: whole-pixel stroke widths (1, 2, 3…) usually look sharper at common display sizes.

Common Pitfalls

Avoid these mistakes when your line refuses to show up.

1. Missing stroke
A line with no stroke paint is invisible.
→ Always set stroke and a non-zero stroke-width.
2. Zero Stroke Width
stroke-width="0" draws nothing.
→ Use a positive width such as 1, 2, or 3.
3. Outside the ViewBox
Endpoints outside the canvas get clipped or disappear.
→ Keep both points inside the SVG size or viewBox.
4. Thick Strokes Clip
Half the width extends past endpoints and can hit the edge.
→ Inset endpoints or expand the canvas padding.
5. Using Line for Polylines
Many separate <line> tags get hard to maintain.
→ Prefer <polyline> for connected multi-point strokes.

Pro Tip: if a line vanishes, check stroke, stroke-width, and whether both endpoints sit inside the viewBox — those three catch most issues.

🧠 How `<line>` Is Drawn

Set the start point (x1, y1)

The line begins at (x1, y1). SVG coordinates start at the top-left of the canvas.

Start

Set the end point (x2, y2)

The segment ends at (x2, y2). The browser connects the two points with a straight edge.

End

Add a stroke to render it

Unlike filled shapes, <line> has no area to fill. Set stroke and usually stroke-width.

Paint

Style caps and dashes

Use stroke-linecap for end shape and stroke-dasharray for dashed or dotted patterns.

Style

A crisp, scalable stroke

The browser draws the vector live from endpoints and stroke paint — sharp at every zoom level.

Important Notes

<line> needs stroke — there is no fill to fall back on.
SVG origin is the top-left; positive y goes down.
stroke-linecap values: butt, round, square.
stroke-dasharray creates dashed and dotted patterns.
Need many connected points? Use <polyline>.
Pair with viewBox when the graphic must scale responsively.

Quick Takeaway: two points + stroke paint. Keep endpoints inside the viewBox, and use CSS sizing for responsive icons.

Compatibility

Browser Support

The SVG <line> element is supported in all modern browsers — and has been for many years — as part of SVG 1.1 basic shapes.

✓ SVG 1.1+

SVG <line>

Usein inline SVG or external .svg files. Coordinates and stroke attributes work consistently across Chrome, Firefox, Safari, Edge, and mobile browsers.

100% Modern browsers

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<line> Universal

Bottom line: Safe for production sites. Prefer inline SVG or cached .svg assets; no polyfill is required for current browsers.

Wrap Up

🎉 Conclusion

SVG <line> is the simplest straight edge on the web: set x1, y1, x2, and y2, then paint with stroke and stroke-width.

Practice the five examples above, then continue to SVG Polygon when you need closed multi-sided shapes.

Always set a stroke, leave room for thickness, and use viewBox when the line must scale with the layout.

View Examples Gallery Continue to Polygon

Pro Tips

💡 Best Practices

✅ Do

Always set a stroke on <line> elements
Use stroke-linecap="round" for friendly UI strokes
Keep stroke widths consistent across an icon or diagram
Prefer whole-pixel stroke widths for sharper rendering
Use a viewBox when the graphic must scale

❌ Don’t

Forget stroke and wonder why nothing appears
Use a stroke width of 0 (it won’t render)
Let thick strokes clip at the SVG edge
Stack many <line> tags when a <polyline> would do
Hard-code pixel sizes when you need a responsive icon

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG `<line>`

Draw straight strokes the SVG way.

Core concepts

➜ 01

<line>

One straight segment

API

xy 02

Points

x1,y1 → x2,y2

Geometry

✎ 03

Stroke

Required to see it

Paint

● 04

Caps

linecap & dashes

Style

🗺 05

viewBox

Scales cleanly

Responsive

❓ Frequently Asked Questions

How do I draw a straight line in SVG?

Use the <line> element. Set x1,y1 for the start point and x2,y2 for the end point, then style with stroke and stroke-width. Example: <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" />.

Why is my SVG line not visible?

Lines need a stroke to be visible. If stroke is missing (or stroke-width is 0), nothing renders. Also ensure the line coordinates are inside the SVG viewBox and that the SVG has a visible size.

How do I make a dashed SVG line?

Use stroke-dasharray (and optionally stroke-dashoffset). For example: stroke-dasharray="8 6" creates a dash of 8 units followed by a gap of 6 units.

What does stroke-linecap do?

stroke-linecap controls the shape of the line ends: butt (flat), round (rounded), or square (square ends that extend past the endpoints).

How do I make an SVG line responsive?

Add a viewBox to the parent <svg>, then size the SVG with CSS. The line scales with the coordinate system because SVG is vector-based.

When should I use <line> instead of <polyline> or <path>?

Use <line> for a single straight segment between two points. Use <polyline> for a chain of connected segments, and <path> when you need curves or mixed commands.

Did you Know? 🔊

An SVG <line> has no fill area — it is pure stroke. Without stroke (and a non-zero stroke-width), the line is invisible. You can animate stroke-dashoffset to create draw-on line effects — a popular technique for loaders and signature animations.

Continue to SVG Polygon

Learn how a list of points creates closed shapes like triangles and hexagons.

Polygon tutorial →

About the author

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)

8 people found this page helpful

SVG Ellipse SVG Polygon

SVG <line> Element

What You’ll Learn

<line>

x1, y1

x2, y2

Stroke

Caps & Dashes

viewBox

Introduction

Why it matters?

Four Coordinates

Stroke Only

Caps & Dashes

Scales With viewBox

📝 Syntax

Attributes

What It Draws

Minimal workflow

Coordinate tips

⚡ Quick Reference

📋 <line> vs <polyline> vs <path> vs <rect>

When to Use <line>

Chart axes & grids

Icons & glyphs

Dividers & rules

Connectors

Not for polylines

Examples Gallery

📚 Getting Started

Example 1 — Basic Diagonal Line

How It Works

Example 2 — Thick Stroke

How It Works

📈 Practical Patterns

Example 3 — Stroke Line Caps

How It Works

Example 4 — Dashed and Dotted Lines

How It Works

Example 5 — Responsive Line With viewBox

How It Works

Use Cases

1. Charts & Axes

2. Icons

3. Dividers

4. Diagram Connectors

5. Layout Guides

6. Education

Advantages

1. Precise Geometry

2. Resolution Independent

3. Rich Stroke Styling

4. Tiny Markup

5. Easy to Animate

Usage Tips

1. Always Set a Stroke

2. Prefer Round Caps for UI

3. Leave Room for Thickness

4. Keep Widths Consistent

5. Use viewBox for Scaling

Common Pitfalls

1. Missing stroke

2. Zero Stroke Width

3. Outside the ViewBox

4. Thick Strokes Clip

5. Using Line for Polylines

🧠 How <line> Is Drawn

Set the start point (x1, y1)

Set the end point (x2, y2)

Add a stroke to render it

Style caps and dashes

A crisp, scalable stroke

Important Notes

Browser Support

SVG &lt;line&gt;

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about SVG <line>

📋 `<line>` vs `<polyline>` vs `<path>` vs `<rect>`

When to Use `<line>`

1. Missing `stroke`

🧠 How `<line>` Is Drawn

SVG <line>

Five things to remember about SVG `<line>`