SVG

Scalable Vector Graphics, or SVG, is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Developed by the World Wide Web Consortium (W3C), SVG is designed for use on the web and can be embedded inline in HTML or referenced as an external file. Because it is vector-based, SVG graphics scale to any size without losing quality, making them suitable for responsive designs and high-resolution displays.

SVG files describe shapes as vectors—paths, basic shapes, text, and images—along with styling and effects such as gradients, patterns, filters, clipping, masking, and transformations. The content is editable via a text editor and can be manipulated with CSS and JavaScript through the DOM. Viewport and viewBox attributes define coordinate systems, enabling scalable rendering.

Standards: SVG was published as an official W3C recommendation in 1.0 (2001) and 1.1 (2003); subsequent work has led to SVG 2 in development. All major web browsers provide native support for SVG, and it is widely used for icons, logos, and vector illustrations in web interfaces.

Usage and tooling: SVG is ideal for scalable icons and crisp UI graphics. Editors include Inkscape, Illustrator, Sketch, and online tools. Optimization tools such as SVGO can reduce file size. SVG may be embedded inline or loaded as an external asset.

Limitations and considerations: Very complex scenes can tax rendering performance, and for photo-realistic imagery raster formats may be more efficient. Inline SVG can pose security concerns if scripts are allowed; CSP and sanitization are recommended. Accessibility features such as title and desc improve screen reader support.