Chapter 8: SVG line
SVG Line means using the <line> tag inside SVG to draw a straight line between two points. It’s the simplest shape for connecting dots — think arrows, graph axes, borders, connections in diagrams, loading bars, or even simple charts.
Unlike <rect>, <circle>, or <ellipse> (which have fill area), a line has no inside — it’s only the stroke (outline). That’s why you must give it stroke color and stroke-width, or it stays invisible!
1. Basic Syntax of <line>
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<line x1="..." <!-- Start point: X coordinate --> y1="..." <!-- Start point: Y coordinate --> x2="..." <!-- End point: X coordinate --> y2="..." <!-- End point: Y coordinate --> stroke="..." <!-- Color of the line – REQUIRED to see it! --> stroke-width="..." <!-- Thickness – usually 1–10 --> /> |
- Self-closing tag (/>)
- Must be inside <svg>…</svg>
- x1, y1, x2, y2 define the two endpoints
- Coordinates in user units (like pixels if viewBox matches)
- No fill needed (or useful) — fill does nothing on a line!
- Important rule from MDN & W3Schools: If no stroke color, line is invisible (default stroke = none)
2. Your First SVG Line (Copy-Paste Right Now!)
Save this as line.html:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Line Basics</title> </head> <body> <h1>Simple Red Diagonal Line</h1> <svg width="300" height="200" viewBox="0 0 300 200" style="border:1px solid gray;"> <!-- Basic line from top-left to bottom-right --> <line x1="0" y1="0" x2="300" y2="200" stroke="red" stroke-width="4" /> </svg> </body> </html> |
What you see: A thick red line going from (0,0) to (300,200) — diagonal across the SVG box.
Breakdown (teacher pointing at blackboard):
- x1=”0″ y1=”0″ → starts at top-left corner
- x2=”300″ y2=”200″ → ends at bottom-right corner
- stroke=”red” → makes it visible (color)
- stroke-width=”4″ → thickness 4 units
- Zoom browser — line stays sharp!
3. All Important Attributes (Full List Like Class Notes)
| Attribute | Meaning | Required to See? | Default | Example values | Notes |
|---|---|---|---|---|---|
| x1 | Start point X (horizontal) | No | 0 | 50, 0, 100% | From left edge |
| y1 | Start point Y (vertical) | No | 0 | 30, 150 | From top edge |
| x2 | End point X | No | 0 | 200, 300 | If same as x1 → vertical line |
| y2 | End point Y | No | 0 | 180, 50 | If same as y1 → horizontal line |
| stroke | Line color | Yes | none | blue, #00ff00, black | Without this = invisible! |
| stroke-width | Line thickness | No | 1 | 2, 10, 5px | Bigger = thicker |
| stroke-linecap | How ends look (square/round/butt) | No | butt | round, square | “round” nice for arrows |
| stroke-dasharray | Dashed/dotted pattern | No | — | “10 5”, “5 5 10” | Dash-gap pattern |
| opacity | Transparency (whole line) | No | 1 | 0.6 | 0 = invisible |
4. More Useful & Fun Examples (Try These!)
Example 1: Horizontal + Vertical Lines (Like Axes)
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<svg width="300" height="200" viewBox="0 0 300 200"> <!-- Horizontal axis --> <line x1="20" y1="180" x2="280" y2="180" stroke="black" stroke-width="3"/> <!-- Vertical axis --> <line x1="20" y1="180" x2="20" y2="20" stroke="black" stroke-width="3"/> </svg> |
→ Simple X-Y graph base
Example 2: Dashed Line (Like Graph Grid)
|
0 1 2 3 4 5 6 |
<line x1="50" y1="50" x2="250" y2="150" stroke="gray" stroke-width="2" stroke-dasharray="8 4"/> |
→ Dash 8 units, gap 4 units
Example 3: Rounded Ends + Thick Line
|
0 1 2 3 4 5 6 |
<line x1="40" y1="40" x2="260" y2="160" stroke="purple" stroke-width="15" stroke-linecap="round"/> |
→ Looks smooth, like a marker pen
Example 4: Hover Effect with CSS (Interactive!)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .my-line:hover { stroke: orange; stroke-width: 12; stroke-dasharray: none; } </style> <svg width="200" height="200"> <line class="my-line" x1="20" y1="20" x2="180" y2="180" stroke="blue" stroke-width="6"/> </svg> |
Hover mouse → color changes + becomes solid thick!
Example 5: Multiple Lines (Star-like Pattern)
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<svg viewBox="0 0 200 200" width="200" height="200"> <line x1="100" y1="20" x2="100" y2="180" stroke="green" stroke-width="4"/> <line x1="20" y1="100" x2="180" y2="100" stroke="green" stroke-width="4"/> <line x1="40" y1="40" x2="160" y2="160" stroke="green" stroke-width="4"/> <line x1="40" y1="160" x2="160" y2="40" stroke="green" stroke-width="4"/> </svg> |
→ Cross + diagonals
5. Teacher’s Tips (Hyderabad Student Special 😄)
- Always add stroke & stroke-width — beginners forget and think “SVG broken”!
- For arrows: Use <marker> (advanced) or just stroke-linecap=”round” for soft ends
- Lines are great for: Charts (D3.js), connectors in flowcharts, borders, underlines
- Difference from <polyline>: <line> = exactly 2 points; <polyline> = many points in a chain
- Common mistake: Same x1=x2 and y1=y2 → point (invisible line!)
- Responsive tip: Use viewBox so lines scale nicely on mobile
Got the line concept clear? Now tell me — want to see an arrowhead example? Animated growing line? Or lines connecting circles/rects (like network diagram)? Or full axis with ticks? Just say — we’re building your SVG skills step by step! 🚀
