<svg>
Inline scalable vector graphics — resolution-independent drawings in the DOM.
Baseline: Widely available · Media & embedded content
When to use it
Inline for icons and diagrams; give meaningful graphics role='img' and an internal title element for the accessible name.
When not to
Purely decorative inline SVG duplicating adjacent text gets aria-hidden='true' instead.
Key attributes
viewBox- coordinate system
role='img' + <title>- accessibility
width / height
Example
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40' role='img' aria-label='Three ascending bars'>
<rect x='10' y='22' width='24' height='14'/>
<rect x='48' y='12' width='24' height='24'/>
<rect x='86' y='4' width='24' height='32'/>
</svg>