SVG
W3C standard for scalable vector graphics
SVG (Scalable Vector Graphics) is an XML-based file format and markup language, standardized by the W3C, for describing two-dimensional vector images such as shapes, paths, and text using mathematical coordinates rather than a fixed grid…
Definition
SVG (Scalable Vector Graphics) is an XML-based file format and markup language, standardized by the W3C, for describing two-dimensional vector images such as shapes, paths, and text using mathematical coordinates rather than a fixed grid of pixels. Because images are defined as geometry rather than pixel data, SVG graphics scale to any size or resolution without losing sharpness, which is why the format is the standard choice for icons, logos, and diagrams on the web.
Overview
Raster image formats like JPEG and PNG store pictures as a grid of colored pixels, which works well for photographs but produces blurry or blocky results when scaled up, and requires shipping a separate file for each resolution or screen density a design needs to support. SVG was developed to solve this by describing an image as a set of geometric instructions, lines, curves, shapes, and text, rather than pixel values, so a single file renders crisply whether displayed at sixteen pixels wide or filling a large monitor. Mechanically, an SVG file is well-formed XML, meaning it is plain text organized into nested elements just like HTML. Shapes are described with dedicated elements such as `<rect>`, `<circle>`, and `<path>`, the last of which uses a compact command syntax to define arbitrary curves and polygons. Because SVG documents are XML, they can be embedded directly inline within an HTML page, referenced as an external file through an `<img>` tag, or manipulated dynamically, meaning JavaScript can select individual SVG elements through the DOM and change their attributes, and CSS can style their fill, stroke, and other visual properties, just as it does for ordinary HTML elements. SVG's defining contrast is with raster formats: PNG and JPEG are appropriate for photographic or continuous-tone images where the format's pixel grid matches the content naturally, while SVG is suited to graphics made of discrete geometric shapes, like icons, logos, charts, and illustrations, where infinite scalability and small file sizes for simple shapes matter more than photographic detail. Among vector formats, SVG's key advantage over older or proprietary alternatives like EPS or Adobe Illustrator's native format is that it is an open, W3C-ratified standard designed specifically for the web and natively supported by every modern browser without a plugin. In practice, SVG is used extensively for website icons and logos that need to look sharp on any screen density, data visualization libraries that draw charts as SVG elements so they remain crisp and stylable with CSS, and animated or interactive graphics where JavaScript manipulates SVG shapes in response to user interaction. Because it is markup rather than pixels, an SVG file can also be inspected, edited, and version-controlled as text, which is convenient for developers working alongside HTML and CSS. The format's limitations show up with complex, richly detailed imagery: SVG is not well suited to photographs or images with continuous gradients across millions of colors, since expressing that level of visual complexity as geometric paths becomes impractical and produces far larger files than an equivalent JPEG. Very complex SVG documents with many elements can also be slower to render and manipulate than a simple raster image, so teams generally reserve SVG for graphics that are genuinely vector in nature rather than using it as a universal image replacement.
Key Features
- Describes images as geometric shapes and paths, not pixel grids
- Scales to any size or resolution without loss of sharpness
- Written as well-formed XML, embeddable directly in HTML
- Stylable with CSS for fill, stroke, and other visual properties
- Manipulable at the element level with JavaScript through the DOM
- Standardized by the W3C and natively supported in all modern browsers
- Well suited to icons, logos, charts, and line-based illustrations
- Produces small file sizes for simple geometric graphics