HTML 5

Scalable Vector Graphics - Polyline

Before reading further, read the following articles.

Now let's move to learn SVG Polyline.

SVG Polyline

The <polyline> tag draws various shapes using only multiple (poly = multiple) straight lines connecting to each other. It does not need to specify the starting and ending coordinates for each line and each time like SVG line.

In other words, it is used to draw open shapes without closing itself like polygons.

Syntax

  1. <svg height="200" width="500">  
  2.     <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"  
  3. style="fill:none;stroke:red;stroke-width:3" />  
  4. </svg>  
The attribute “points” is used to make up a polyline by listing all the necessary points for making specified shapes.

Let's see a few examples to make it easier to understand.

Example 1

The following makes a random shape by connecting multiple straight lines.
  1. <html>  
  2.     <body>  
  3.         <svg height="200" width="500">  
  4.             <polyline points="10,40 70,15 50,80 90,70 120,100 250,80" style="fill:none;stroke:red;stroke-width:3" />  
  5.         </svg>  
  6.     </body>  
  7. </html>   
Output



Example 2

The following are specific shapes.
  1. <html>  
  2.     <body>  
  3.         <svg height="200" width="500">  
  4.             <polyline points="10,120 30,15 70,70 125,15 130,120" style="fill:none;stroke:lime;stroke-width:3" />  
  5.             <polyline points="150,15 170,120 190,90 210,120 230,15" style="fill:none;stroke:tomato;stroke-width:5" />  
  6.             <polyline points="320,15 300,120 250,15 240,120" style="fill:none;stroke:blue;stroke-width:5" />  
  7.         </svg>  
  8.     </body>  
  9. </html>   
Output



Example 3

The following shows dashed strokes.
  1. <html>  
  2.     <body>  
  3.         <svg height="200" width="500">  
  4.             <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,120 120,80 160,80 160,40 200,40" style="fill:none;stroke:green;stroke-width:3; stroke-dasharray:7 3" />  
  5.             <polyline points="220,10 300,10 220,100 300,100" style="fill:none;stroke:orange;stroke-width:5; stroke-dasharray:10 3" />  
  6.         </svg>  
  7.     </body>  
  8. </html>  
Output



Example 4

The following shows filled shapes.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="700">  
  4.             <polyline points="10,120 160,15 220,100 280,40" style="fill:orange;stroke:green;stroke-width:3" />  
  5.             <polyline points="300,10 300,80 340,100 380,80 380,10" style="fill:tomato;stroke:black;stroke-width:4" />  
  6.             <polyline points="450,10 410,100 550,100" style="fill:cyan;stroke:blue;stroke-width:4; stroke-dasharray:10 3" />  
  7.             <polyline points="570,90 610,10 650,60 690,70" style="fill:pink;stroke:red;stroke-width:3; stroke-dasharray:7 3" />  
  8.         </svg>  
  9.     </body>  
  10. </html>   
Output



Example 5

The following uses opacity.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="700">  
  4.             <polyline points="10,10 120,50 60,130 170,80 150,140" style="fill:blue;stroke:black;stroke-width:3; fill-opacity:0.3" />  
  5.             <polyline points="190,20 210,120 270,140 320,120 350,80" style="fill:blue;stroke:black;stroke-width:6; stroke-opacity:0.4" />  
  6.             <polyline points="390,60 400,30 310,10 400,110" style="fill:orange;stroke:blue;stroke-width:3; stroke-dasharray:10 3; fill-opacity:0.3" />  
  7.             <polyline points="430,150 530,10 580,90 660,70 690,40" style="fill:orange;stroke:blue;stroke-width:5; stroke-dasharray:10 3; stroke-opacity:0.4" />  
  8.         </svg>  
  9.     </body>  
  10. </html>   
Output



Example 6
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="1000">  
  4.             <polyline points="90,90 10,90 10,40 90,40 90,90 110,90 110,40 190,40 190,90 110,90" style="fill:blue;stroke:black;stroke-width:3; fill-opacity:0.3" />  
  5.             <polyline points="190,90 210,90 210,40 290,40 290,90 190,90" style="fill:blue;stroke:black;stroke-width:3; fill-opacity:0.3" />  
  6.             <polyline points="290,90 310,90 310,30 400,30 410,90 190,90" style="fill:tomato;stroke:black;stroke-width:3; fill-opacity:0.7" />  
  7.             <polyline points="365,80 365,50 385,50 385,80" style="fill:red;stroke:black;stroke-width:3; fill-opacity:0.7" />  
  8.             <polyline points="390,30 390,20 370,20 370,30" style="fill:red;stroke:black;stroke-width:3; fill-opacity:0.7" />  
  9.             <polyline points="400,35 407,35 407,42 402,42" style="fill:red;stroke:black;stroke-width:3; fill-opacity:0.7" />  
  10.             <line x1="375" y1="20" x2="370" y2="5" style="stroke:black ;stroke-width:2; stroke-dasharray:5 2;" />  
  11.             <line x1="380" y1="20" x2="380" y2="5" style="stroke:black ;stroke-width:2; stroke-dasharray:5 2;" />  
  12.             <line x1="385" y1="20" x2="390" y2="5" style="stroke:black ;stroke-width:2; stroke-dasharray:5 2;" />  
  13.             <line x1="407" y1="36" x2="500" y2="27" style="stroke:yellow ;stroke-width:2; stroke-dasharray:5 2;" />  
  14.             <line x1="407" y1="37" x2="500" y2="36" style="stroke:yellow ;stroke-width:2; stroke-dasharray:5 2;" />  
  15.             <line x1="407" y1="38" x2="500" y2="45" style="stroke:yellow ;stroke-width:2; stroke-dasharray:5 2;" />  
  16.         </svg>  
  17.     </body>  
  18. </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