Français

<circle>

Draw shapes: circles, rectangles, lines

— 2 min read

  • HTML
  • accessibility
  • semantics
  • svg

SVG geometric shapes — circles, rectangles, lines

The basic SVG shapes are graphic primitives: <circle>, <rect>, <line>, <ellipse>, and <polygon>. Each is defined by position and dimension attributes — no complex path needed to draw a rectangle or a circle.

When to use it

You want to draw simple shapes: icons, badges, visual indicators, basic charts. A <rect> for a button, a <circle> for a default avatar, a <polygon> for a rating star.

What you gain

Accessibility: shapes alone carry no semantics. Add a <title> to the parent <svg> or an aria-label on the group (<g>) so assistive technologies understand what the shape represents.

Code example

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <!-- Rectangle -->
  <rect x="10" y="10" width="80" height="60" rx="8" fill="teal" />
 
  <!-- Circle -->
  <circle cx="150" cy="40" r="30" fill="coral" />
 
  <!-- Ellipse -->
  <ellipse cx="250" cy="40" rx="40" ry="25" fill="gold" />
 
  <!-- Line -->
  <line x1="10" y1="120" x2="290" y2="120" stroke="gray" stroke-width="2" />
 
  <!-- Polygon (triangle) -->
  <polygon points="150,140 120,190 180,190" fill="slateblue" />
</svg>

Further reading