Everything you need to know about SVG
SVG (Scalable Vector Graphics, .svg) is the W3C's vector image format - an XML-based standard from 2001. Unlike raster formats (JPG, PNG), SVG describes shapes mathematically: 'circle of radius 10 at coordinates (50, 50)', not 'pixel #1 is red, pixel #2 is...'. The result: infinite scalability, tiny file sizes for simple graphics, and full CSS/JavaScript control.
How it works under the hood
- XML structure. Every SVG is valid XML - you can edit it in any text editor. `<rect>`, `<circle>`, `<path>`, `<text>` are the core shape primitives.
- Path commands. The `<path d="..."/>` element uses SVG's path syntax (M=moveto, L=lineto, C=curve, Z=close) - same conceptual model as PostScript and PDF.
- CSS styling. SVGs accept CSS for fill, stroke, opacity, transforms - making them theme-aware and animatable through CSS alone.
- Embed vs link. SVG can be embedded inline in HTML (best for icons/control), referenced via `<img src='icon.svg'>` (best for separate caching), or used as CSS background.
Where you'll actually use it
- Logos and brand identity (scales for any size, retina-ready)
- UI icons (Lucide, Feather, Heroicons - all SVG)
- Charts and data visualization (D3.js, Chart.js)
- Illustrations and infographics that need crisp text
How it compares to alternatives
SVG vs PNG: SVG for vector graphics (logos, icons); PNG for raster (photos, screenshots). SVG vs Webfont icons: SVG inline gives full styling control; webfont icons are cached once and reused. SVG wins on accessibility and color flexibility.
Things that will trip you up
- SVG with embedded raster images defeats the purpose - keep raster content in PNG/WebP and reference it
- Older Safari versions had buggy SVG mask/clip support - test on real iOS
- SVG can include JavaScript - this is a security risk if you accept user-uploaded SVGs (sanitize with DOMPurify)
Test it yourself: Any browser, `svgo` for optimization (typically 50-70% size reduction), Inkscape for editing. Validate with W3C's validator.w3.org.