Skip to content
SVG

Basic Shapes

Rect, circle, ellipse, line, polygon, polyline.

#shape#rect#circle

Code

svg
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <rect x="10" y="10" width="80" height="50" fill="steelblue"/>
  <circle cx="150" cy="50" r="40" fill="tomato"/>
  <ellipse cx="100" cy="130" rx="60" ry="30" fill="seagreen"/>
  <line x1="10" y1="180" x2="190" y2="180" stroke="black" stroke-width="2"/>
  <polygon points="100,10 40,90 160,90" fill="orange"/>
  <polyline points="10,10 50,40 90,10 130,40" fill="none" stroke="purple"/>
</svg>