SVG Line

Q: How do I draw a straight line in SVG?

Use the element. Set x1,y1 for the start point and x2,y2 for the end point, then style with stroke and stroke-width. Example: .

Q: 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.

Q: How do I create dashed lines in SVG?

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.

Q: 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).

Q: How do I make an SVG line responsive?

Use a viewBox on the parent and scale the SVG with CSS. The line scales with the coordinate system, keeping it crisp because SVG is vector-based.

Beginner

⏱️ 6 min read

📚 Updated: Aug 2025

🎯 1 Code Example

Basic Shape

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

What You’ll Learn

How to draw straight lines with SVG using the <line> element. Lines are a fundamental building block for diagrams, charts, icons, grids, separators, and custom drawings.

You’ll learn the syntax, the four core coordinate attributes (x1, y1, x2, y2), and the most useful stroke properties like stroke, stroke-width, stroke-linecap, and stroke-dasharray.

⚡ Quick Reference — SVG Line Attributes

x1, y1 number

Start point coordinates

x2, y2 number

End point coordinates

stroke color

Line colour (required to see the line)

stroke-width number

Thickness in pixels

stroke-linecap butt | round | square

Shape of the line ends

stroke-dasharray pattern

Dashed or dotted lines

Basic Syntax

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

Complete HTML Example

This example draws a diagonal line from (50, 50) to (150, 150) inside a 200×200 SVG canvas:

index.html

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Try It Yourself

👀 Live Preview — Stroke Styling

The <line> element is all about strokes. Here are the most useful style variations:

Thin line

Thick line

Round linecap

Square linecap

Dashed

Dotted

🧠 How It Works

Set the start point (x1, y1)

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

Start

Set the end point (x2, y2)

The line ends at (x2, y2). Together, these four values define the geometry of the line.

End

Add a stroke to render it

Unlike filled shapes, <line> has no area to fill. You must set stroke (and usually stroke-width) to make it visible.

Stroke

Style the ends and pattern

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

Style

Crisp vector lines

SVG lines remain sharp at any resolution and are perfect for UI dividers, charts, and diagrams.

✅

Use Cases

SVG lines are used in many common UI and visualisation patterns:

📊 Charts

Axes, grid lines, trend lines, and tick marks.

🧩 Diagrams

Connectors, callouts, and flow lines.

💡 UI Dividers

Separators and decorative strokes.

🎯 Icons

Simple strokes, plus signs, arrows, and glyphs.

⏳ Progress UI

Dashes for loading and timeline steps.

🖌 Annotations

Underlines, highlights, and pointers in tutorials.

💡 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
Use a viewBox if the SVG needs to be responsive
Prefer whole-pixel stroke widths for sharper rendering

Don’t

Forget that <line> has no fill area
Use a stroke width of 0 (it won’t render)
Place coordinates outside the SVG viewBox/canvas
Overuse heavy dash patterns in dense charts (it can get noisy)
Hard-code pixel sizes when the graphic must scale

Key Takeaways

A line is defined by two points

(x1, y1) (x2, y2)

stroke is required to see the line

Use stroke-linecap to control end shapes

Use stroke-dasharray for dashed and dotted lines

Use viewBox for responsive SVGs

❓ Frequently Asked Questions

How do I draw a straight line in SVG?

Use <line> and set x1, y1, x2, y2. Then set stroke and stroke-width to make it visible.

Why is my SVG line not visible?

Make sure you set stroke (and a non-zero stroke-width). Also verify the coordinates are inside the SVG bounds/viewBox.

How do I create dashed lines in SVG?

Use stroke-dasharray. Example: stroke-dasharray="8 6" draws 8 units of dash followed by 6 units of gap.

What does stroke-linecap do?

It controls the shape of the line ends: butt, round, or square.

How do I make an SVG line responsive?

Use a viewBox on the <svg> and size the SVG with CSS. The line scales with the coordinate system.

Add Colour with Gradients

Next, learn how to create linear gradients and apply them to fills and strokes in SVG.

SVG Linear Gradients →

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)

5 people found this page helpful

SVG Interactivity SVG Linear Gradients