About SVG — the format that scales infinitely
SVG stands for Scalable Vector Graphics. It is an XML-based image format standardized by the W3C in 1999, designed to describe shapes mathematically (paths, curves, fills, strokes) rather than pixel-by-pixel. The practical consequence: an SVG renders sharply at any size, from a 16×16 favicon to an 8K wallpaper, with no quality loss and almost no file-size difference.
When to use SVG
- Icons — UI icons, social-media glyphs, brand marks.
- Logos — they must look perfect at every size from a business card to a billboard.
- Illustrations — flat-vector art, infographics, line drawings.
- Animated UI — CSS or SMIL animations on individual shape elements.
When NOT to use SVG
Photographs. A photo of a sunset has thousands of subtle gradients that vector tracing can't capture faithfully. Stick with JPG or WebP for photographic content.
History
SVG was created to settle a format war between Adobe's PGML and Microsoft's VML in the late 1990s. The W3C published SVG 1.0 in September 2001. Browser support was rocky for the first decade — Internet Explorer didn't add native SVG support until IE9 in 2011 — but every modern browser now renders SVG natively. SVG 2.0 (2018) added new path commands and tighter HTML integration.
Tools for SVG
Need to convert from SVG to PNG (some platforms still refuse SVG uploads)? Use SVG to PNG. To shrink files exported from Figma or Illustrator (typically 40–70% file-size reduction with no visual change), use the SVG Optimiser.
