Scalable Vector Graphics - Line

In this article we will learn about the Scalable Vector Graphics line used in HTML5.

Before reading further, read the following article.

Now let's move to 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>  
  • x1 and y1 attributes define the starting point of the line on x-axis and y-axis respectively.
  • x2 and y2 attributes define the ending point of the line on x-axis and y-axis respectively.

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.