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. Inline SVG elements participate in the DOM, enabling CSS styling, JavaScript interaction, and 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 add motion without external libraries
File size scales with path complexity rather than pixel dimensions, making SVG unsuitable for photographic content. It suits geometric representations: icons, logos, charts, maps, and UI elements. Applying gzip compression (.svgz) reduces transfer size. For web delivery, tools like SVGO can strip unnecessary metadata and optimize path data.