A short history
SVG (Scalable Vector Graphics) is a W3C open standard, first released in 2001 after the web community consolidated competing vector proposals. Unlike every other format here, it isn’t a grid of pixels — it’s an XML document describing shapes, paths and text, which the browser draws fresh at whatever size is needed.
How it works
Because an SVG is a set of drawing instructions rather than a raster, it’s resolution-independent: the same file is razor-sharp on a phone and on a 5K display, and stays tiny for simple logos and icons. SVGs can be styled and animated with CSS and manipulated with JavaScript — which also means SVGs from untrusted sources should be sanitised, since they can contain scripts.
When & how to use it
Use SVG for anything that must scale crisply and isn’t a photograph: logos, icon sets, illustrations, charts. It’s the ideal source format for a favicon or a responsive logo. It is not suited to photographic content — there’s no efficient way to describe millions of subtly-varying pixels as vectors.
- A W3C open standard, first published in 2001.
- Vector, not raster — described in XML, drawn fresh at any size.
- Resolution-independent and styleable/animatable with CSS.
- Can embed scripts, so always sanitise SVGs from untrusted sources.