media
<svg>
Inline vector graphics that scale losslessly and can be styled and animated with CSS or JS. Use it for icons, logos, charts, and any illustration that must stay crisp at any size.
<svg viewBox="0 0 24 24" width="24" height="24"><path d="..."/></svg>Common attributes
| Attribute | Purpose |
|---|---|
| viewBox | Coordinate system: min-x min-y width height |
| width | Rendered width |
| height | Rendered height |
| xmlns | SVG namespace — required for standalone .svg files |
| role | img (informative) or presentation (decorative) |
| aria-label | Accessible name for informative SVGs |
| fill | Default fill color (often currentColor) |
Examples
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="M12 2l3 7h7l-5 5 2 8-7-4-7 4 2-8-5-5h7z"/></svg>Star icon that inherits text color
<svg role="img" aria-label="Utilko logo" viewBox="0 0 100 40">...</svg>Accessible informative logo
<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="tomato"/></svg>Simple shape drawing
Gotcha
Inline SVGs without role and label are treated inconsistently by AT — add aria-hidden="true" for decorative icons, role="img" + aria-label for informative ones. The xmlns attribute is only required in standalone .svg files, not inline.
Related tags
<img>
Embeds a raster or vector image into the document. Use it for content images; use CSS background-image for purely decorative visuals.
<video>
Embeds a video player in the page, with native browser controls and multiple source support. Use it for self-hosted or CDN-hosted video instead of Flash or heavy JS players.
<iframe>
Embeds another HTML document inside the current page. Use it for third-party embeds (maps, videos, payments) — but treat every iframe as untrusted and sandbox where possible.