Introduction

Before reading further, read the following article.
Now let's move to the SVG line.
SVG Line
The tag <line> is used to draw a line with starting and ending points inside the SVG image. The <line> tag just takes the attributes x1, x2, y1, and y2 to draw a line from the starting point (x1, x2) to the ending point (y1, y2).
Syntax
  1. <svg height="210" width="500">
  2. <line x1="0" y1="0" x2="200" y2="200" style="stroke:green; stroke-width:2" />
  3. </svg>
Let's see a simple example to understand it properly.
Example 1
Lines with simple strokes.
  1. <html>
  2. <body>
  3. <svg height="210" width="600">
  4. <line x1="10" y1="10" x2="80" y2="80" style="stroke:blue ;stroke-width:2" />
  5. <line x1="70" y1="10" x2="160" y2="110" style="stroke:tomato ;stroke-width:4" />
  6. <line x1="130" y1="10" x2="250" y2="140" style="stroke:lime ;stroke-width:6" />
  7. <line x1="190" y1="10" x2="350" y2="180" style="stroke:pink ;stroke-width:9" />
  8. </svg>
  9. </body>
  10. </html>
Output
Example 2
Lines with dashed strokes.
  1. <html>
  2. <body>
  3. <svg height="250" width="500">
  4. <line x1="100" y1="10" x2="80" y2="80" style="stroke:green ;stroke-width:2; stroke-dasharray:5 2;" />
  5. <line x1="150" y1="10" x2="150" y2="150" style="stroke:orange ;stroke-width:4; stroke-dasharray:10 5;" />
  6. <line x1="200" y1="10" x2="250" y2="110" style="stroke:lime ;stroke-width:5; stroke-dasharray:5 5;" />
  7. </svg>
  8. </body>
  9. </html>
Output
Example 3
Lines with different fill-opacity/stroke-opacity.
  1. <html>
  2. <body>
  3. <svg height="250" width="500">
  4. <line x1="0" y1="0" x2="80" y2="80" style="stroke:green ;stroke-width:3;" />
  5. <line x1="80" y1="80" x2="120" y2="40" style="stroke:green ;stroke-width:3; opacity:0.5" />
  6. <line x1="120" y1="40" x2="190" y2="60" style="stroke:green ;stroke-width:3; opacity:0.5; stroke-opacity: 0.5" />
  7. <line x1="190" y1="60" x2="150" y2="30" style="stroke:green ;stroke-width:3; opacity:0.5; stroke-opacity: 0.3" />
  8. <line x1="120" y1="40" x2="150" y2="100" style="stroke:red ;stroke-width:4;" />
  9. <line x1="150" y1="100" x2="290" y2="70" style="stroke:red ;stroke-width:4; opacity:0.5" />
  10. <line x1="290" y1="70" x2="250" y2="120" style="stroke:red ;stroke-width:4; opacity:0.5; stroke-opacity: 0.5" />
  11. <line x1="250" y1="120" x2="290" y2="100" style="stroke:red ;stroke-width:4; opacity:0.5; stroke-opacity: 0.3" />
  12. <line x1="290" y1="70" x2="320" y2="110" style="stroke:blue ;stroke-width:4;" />
  13. <line x1="320" y1="110" x2="350" y2="30" style="stroke:blue ;stroke-width:4; opacity:0.5" />
  14. <line x1="350" y1="30" x2="380" y2="120" style="stroke:blue ;stroke-width:4; opacity:0.5; stroke-opacity: 0.5" />
  15. <line x1="380" y1="120" x2="400" y2="80" style="stroke:blue ;stroke-width:4; opacity:0.5; stroke-opacity: 0.3" />
  16. </svg>
  17. </body>
  18. </html>
Output
Example 4
  1. <html>
  2. <body>
  3. <svg height="250" width="500">
  4. <line x1="10" y1="40" x2="90" y2="35" style="stroke:green ;stroke-width:3;" />
  5. <line x1="90" y1="35" x2="160" y2="20" style="stroke:green ;stroke-width:3; stroke-dasharray:10 2" />
  6. <line x1="160" y1="20" x2="190" y2="5" style="stroke:green ;stroke-width:3; stroke-dasharray:10 2; opacity:0.5; stroke-opacity: 0.5" />
  7. <line x1="20" y1="50" x2="100" y2="50" style="stroke:red ;stroke-width:4;" />
  8. <line x1="100" y1="50" x2="170" y2="50" style="stroke:red ;stroke-width:4; stroke-dasharray:10 2" />
  9. <line x1="170" y1="50" x2="200" y2="50" style="stroke:red ;stroke-width:4; stroke-dasharray:10 2; opacity:0.5; stroke-opacity: 0.5" />
  10. <line x1="10" y1="60" x2="90" y2="65" style="stroke:blue ;stroke-width:3;" />
  11. <line x1="90" y1="65" x2="160" y2="80" style="stroke:blue ;stroke-width:3; stroke-dasharray:10 2" />
  12. <line x1="160" y1="80" x2="190" y2="95" style="stroke:blue ;stroke-width:3; stroke-dasharray:10 2; opacity:0.5; stroke-opacity: 0.5" />
  13. </svg>
  14. </body>
  15. </html>
Output
Example 5
Combination of lines and a circle.
  1. <html>
  2. <body>
  3. <svg height="500" width="500">
  4. <circle cx="170" cy="150" r="60" style="fill:yellow; stroke:orange ;stroke-width:5; stroke-opacity: 0.3"/>
  5. <line x1="170" y1="85" x2="170" y2="50" style="stroke:orange ;stroke-width:3;" />
  6. <line x1="170" y1="50" x2="170" y2="20" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2" />
  7. <line x1="170" y1="20" x2="170" y2="0" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2; opacity:0.5; stroke-opacity: 0.5" />
  8. <line x1="215" y1="105" x2="250" y2="70" style="stroke:orange ;stroke-width:3;" />
  9. <line x1="250" y1="70" x2="280" y2="40" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2" />
  10. <line x1="280" y1="40" x2="300" y2="20" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2; opacity:0.5; stroke-opacity: 0.5" />
  11. <line x1="235" y1="150" x2="270" y2="150" style="stroke:orange ;stroke-width:3;" />
  12. <line x1="270" y1="150" x2="300" y2="150" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2" />
  13. <line x1="300" y1="150" x2="320" y2="150" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2; opacity:0.5; stroke-opacity: 0.5" />
  14. <line x1="215" y1="195" x2="250" y2="225" style="stroke:orange ;stroke-width:3;" />
  15. <line x1="250" y1="225" x2="280" y2="250" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2" />
  16. <line x1="280" y1="250" x2="300" y2="265" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2; opacity:0.5; stroke-opacity: 0.5" />
  17. <line x1="170" y1="215" x2="170" y2="250" style="stroke:orange ;stroke-width:3;" />
  18. <line x1="170" y1="250" x2="170" y2="280" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2" />
  19. <line x1="170" y1="280" x2="170" y2="300" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2; opacity:0.5; stroke-opacity: 0.5" />
  20. <line x1="122" y1="193" x2="95" y2="220" style="stroke:orange ;stroke-width:3;" />
  21. <line x1="95" y1="220" x2="65" y2="250" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2" />
  22. <line x1="65" y1="250" x2="45" y2="270" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2; opacity:0.5; stroke-opacity: 0.5" />
  23. <line x1="105" y1="150" x2="70" y2="150" style="stroke:orange ;stroke-width:3;" />
  24. <line x1="70" y1="150" x2="40" y2="150" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2" />
  25. <line x1="40" y1="150" x2="20" y2="150" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2; opacity:0.5; stroke-opacity: 0.5" />
  26. <line x1="125" y1="105" x2="95" y2="75" style="stroke:orange ;stroke-width:3;" />
  27. <line x1="95" y1="75" x2="65" y2="45" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2" />
  28. <line x1="65" y1="45" x2="45" y2="25" style="stroke:orange ;stroke-width:3; stroke-dasharray:5 2; opacity:0.5; stroke-opacity: 0.5" />
  29. </svg>
  30. </body>
  31. </html>
Output
Want to read more...
Thank you, keep learning and sharing.