HTML 5

Scalable Vector Graphics - Line

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.
 
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs