SVG

Scalable Vector Graphics

A markup format for vector images — shapes defined by math (rectangles, paths, circles) rather than pixels. Scales to any size without losing quality.

When you'd see it: Logos, icons, charts, diagrams, illustrations on the web. Modern icon libraries (Heroicons, Lucide, Font Awesome) ship as SVG. Many dashboards build charts as SVG via libraries like D3 or Chart.js.

Why it matters: SVG images stay crisp at any size — critical for logos shown at very small sizes (favicons) and very large sizes (hero illustrations) on the same site. They're also editable: you can write SVG by hand in any text editor and version it like code.

Common mistakes: Using SVG for photographic content (where raster formats like JPEG or WebP are far smaller). Or shipping huge auto-generated SVGs without inspecting them first — exported SVGs from design tools often include thousands of unnecessary path nodes that bloat the file.

Related HTML, CSS