Basic Shapes

Code

<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>

Explanation

SVG provides six basic shape elements: rect, circle, ellipse, line, polygon, and polyline. Position is given in the user coordinate system established by the parent svg element. Fill controls interior color while stroke controls the outline color and width.

More SVG Snippets