Origin
SVG stands for Scalable Vector Graphics. The W3C developed it so the web could have a native, text-based vector format instead of relying only on raster images or plug-ins. Its design fits the web platform: markup, styling, scripting, links, accessibility, and document structure.
SVG became especially important as screens multiplied. A pixel-perfect 32 px icon is not enough when the same graphic must look sharp on a watch, a phone, a laptop, and a 5K monitor.
Technical characteristics
An SVG file describes geometry: paths, rectangles, circles, gradients, masks, filters, text, and coordinate systems. Because the renderer computes pixels at display time, the same SVG can scale cleanly from a tiny icon to a billboard-size print proof, as long as the artwork itself is vector-like.
SVG is not magic for photographs. A detailed photo converted to SVG usually becomes a heavy posterization or tracing approximation. SVG can also contain scripts and external references, so untrusted SVGs should be sanitized before being embedded directly in pages.
Where it fits
Use SVG for logos, icons, charts, line illustrations, simple maps, badges, UI symbols, and diagrams that should remain editable and sharp. Use PNG, WebP, JPEG, or AVIF for photos and rich raster artwork.
A practical rule: if the image can be described as shapes, SVG is probably right. If it depends on millions of tiny color samples, use a raster format.
Best uses
- Logos and icons
- Charts, diagrams, and line art
- Graphics that need to scale without blur
Use another format when
- Complex photographs
- Untrusted user uploads embedded as inline markup
- Pixel-level editing workflows