Basic SVG Shapes

There are 7 elements that define basic shapes in SVG: <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, and <path>.  Below we how examples of the first 6 and discuss the 7th element <path> in the next tutorial.

<rect x="20" y="20"
      width="100" height="50"
      stroke-width="4" stroke="red"
      fill="transparent" />
 
<rect x="20" y="20"
      width="100" height="50"
      stroke="red" stroke-width="4" 
      fill="transparent"
      rx="10" ry="10" />
 
<circle cx="74" cy="45"
        r="25"
        stroke="red" stroke-width="4"
        fill="transparent" />
 
<ellipse cx="70" cy="255"
         rx="50" ry="25"
         stroke="red" stroke-width="5"
         fill="transparent" />
 
<line x1="20" y1="20"
      x2="120" y2="20"
      stroke="red" stroke-width="5"/>
 
<polyline points="20 20 120 20 100 70 40 40"
         stroke="red" stroke-width="5"
         fill="transparent"/>
 
<polygon points="20 20 120 20 100 70 40 40"
         stroke="red" stroke-width="5"
         fill="transparent"/>

© 2018 – 2021, Eric. All rights reserved.