HTML SVG
Write a circle centred at 50,50 with radius 20 and a green fill.
Understand the topic
SVG represents graphics as structured vector shapes. It can scale without the same pixelation as a fixed bitmap, and inline SVG participates in the DOM. A viewBox defines the coordinate system. Shapes such as rect, circle, and path describe geometry. Meaningful diagrams still need a text alternative and, when necessary, an equivalent description of their data.
Worked example
<svg viewBox="0 0 240 100" width="240" role="img" aria-labelledby="diagram-title">
<title id="diagram-title">Two steps: write HTML, then view the page</title>
<rect x="5" y="20" width="100" height="55" rx="4" fill="#dcfce7" stroke="#15803d"/>
<rect x="135" y="20" width="100" height="55" rx="4" fill="#e0f2fe" stroke="#0369a1"/>
<path d="M105 47 H135" stroke="#334155"/>
<text x="55" y="52" text-anchor="middle" fill="#172033">Write HTML</text>
<text x="185" y="52" text-anchor="middle" fill="#172033">View page</text>
</svg>The graphic uses a scalable coordinate system and a title associated through aria-labelledby. It describes a simple workflow rather than serving as unexplained decoration.
Practice
Write a circle centred at 50,50 with radius 20 and a green fill.
Show a suggested answer
<circle cx="50" cy="50" r="20" fill="#15803d" />Common mistake
SVG attribute names can be case-sensitive. Write viewBox with its capital B.