HTML - SVG

Overview

Estimated time: 25–35 minutes

SVG is declarative and resolution-independent; great for icons, charts, and illustrations.

Example

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="60" fill="#4f46e5" />
  <circle cx="140" cy="40" r="30" stroke="#22c55e" fill="none" />
</svg>

Try it

Common Pitfalls

• Missing viewBox—prevents proper scaling.