SVG

SVG (Scalable Vector Graphics) is an XML-based vector image format. Instead of storing pixels, SVG stores instructions: “draw a circle of radius 50 at (100, 100), fill blue.” The browser rasterises at display time, so the same file looks crisp at any size from 16×16 to a 4K billboard.

Properties:

• Resolution-independent — same file for retina and standard displays.
• Tiny file sizes for simple shapes — a typical icon is 500 bytes to 5 KB. Beats every raster format on size for the same content.
• Editable as text — open in any editor, tweak the path data, save. No proprietary tooling required.
• CSS-styleable — fill, stroke, transform can come from external CSS.
• Animatable via CSS transitions and SMIL (though SMIL is being deprecated in favour of CSS + WAAPI).

Where SVG wins: logos, icons, illustrations, diagrams, data visualisations. Where it loses: photographs (no efficient way to represent millions of subtly-different pixels as vectors), complex gradients (file size balloons), 3D rendering (use canvas/WebGL).

Inline SVG (embedded in HTML) is the modern best practice for icons — no separate request, CSS-stylable, accessible via aria-label. External SVG (in a separate file) is fine for less critical assets.