HTML SVG
SVG describes vector graphics as elements rather than a single painted bitmap. It is useful for icons, diagrams, and simple illustrations that need to scale without pixelation.
How it works
- viewBox defines a coordinate system. width and height determine the displayed size; the browser maps the coordinates into that area.
- Shapes such as rect, circle, and path describe geometry. fill and stroke control interior and outline presentation.
- Give informative graphics a name and description when appropriate. Decorative SVG can be hidden from assistive technology. Treat untrusted SVG as active content requiring careful handling.
A practical example
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" width="240" height="160" role="img" aria-labelledby="diagram-title">
<title id="diagram-title">Two workshop rooms</title>
<rect x="5" y="5" width="50" height="70" fill="#0f766e"/>
<rect x="65" y="5" width="50" height="70" fill="#9bc3b1"/>
</svg>
The graphic uses a 120-by-80 coordinate system and displays at twice that size. Its rectangles remain sharp when scaled.