Lesson 15 of 55 · HTML
SVG Basics
Duration: 10 min
Scalable Vector Graphics (SVG)
<svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<circle cx='50' cy='50' r='40' fill='green' stroke='black' stroke-width='2' />
<text x='50' y='55' font-size='12' text-anchor='middle' fill='white'>SVG</text>
</svg>
Core concepts
<svg>container defines a coordinate system viaviewBox(min-x min-y width height).- Shapes:
<rect>,<circle>,<ellipse>,<line>,<polygon>,<path>. <text>allows labeling directly inside the graphic; usetext-anchorfor alignment.- Inline SVG can be styled with CSS (
fill,stroke,opacity) and animated via SMIL or CSS@keyframes. - CSS
var(--color-primary)can be used inside SVG styles for easy theming.
Accessibility
- Add a
<title>and<desc>inside the SVG for screen readers. - When the SVG is decorative, add
aria-hidden='true'. - Use
focusable='false'to prevent keyboard focus on decorative graphics.
Quick checklist for SVG
viewBoxset for responsive scaling? ✅<title>/<desc>provided for meaning? ✅- Styling done via CSS, not inline
fillwhere possible? ✅ - Decorative icons hidden from assistive tech (
aria-hidden)? ✅ - Tested with a screen reader for correct description? ✅
Tip: Use
<use>with an external SVG sprite sheet to reduce duplicate markup and improve caching.