SVG Basic Shapes

Basic Shapes

SVG provides: <rect>, <circle>, <ellipse>, <line>, <polyline>, and <polygon>.

Example

<svg width="300" height="120" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="60" fill="coral" rx="5"/>
  <circle cx="160" cy="40" r="30" fill="steelblue"/>
  <ellipse cx="250" cy="40" rx="40" ry="25" fill="mediumseagreen"/>
  <line x1="10" y1="100" x2="290" y2="100" stroke="#333" stroke-width="2"/>
</svg>

HTML

Full Editor

Pro Tip

SVG coordinates start at top-left (0,0).

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned