SVG
An XML-based vector image format that scales to any resolution without quality loss. Ideal for icons, logos, and charts.
SVG (Scalable Vector Graphics) is a W3C standard for describing two-dimensional vector graphics in XML. Unlike raster images composed of pixel grids, SVG defines shapes through mathematical coordinates and path instructions, maintaining crisp edges at any display size or resolution.
Its XML structure is human-readable and editable in any text editor. SVG elements participate in the DOM, enabling CSS styling, JavaScript interaction, and seamless integration with web application frameworks.
- Path elements: Shapes are described with coordinate instructions like
<path d="M10 10 L90 90">, supporting lines, curves, and arcs - Filters and gradients: Blur, drop shadow, linear and radial gradients are declared within the XML markup
- Animation: SMIL and CSS animations enable lightweight motion graphics without external libraries
File size scales with path complexity rather than pixel dimensions, making SVG unsuitable for photographic content. It excels at geometric representations: icons, logos, charts, maps, and UI elements. Applying gzip compression (.svgz) reduces transfer size by an additional 60-80%. For web delivery, tools like SVGO can strip unnecessary metadata and optimize path data, often reducing file size by 30-50% without visual change.