Overview
SVG is an XML-based vector image format for two-dimensional graphics, developed and maintained by the World Wide Web Consortium (W3C). Unlike raster formats such as JPEG and PNG, which store images as grids of colored pixels, SVG describes graphics using mathematical primitives — lines, curves, rectangles, circles, text, and paths defined by coordinate geometry. This means SVG images can be scaled to any size without losing quality, rendering crisply on everything from tiny mobile screens to massive billboard displays.
Because SVG files are plain-text XML, they can be created and edited in any text editor, manipulated with CSS and JavaScript, embedded directly in HTML documents, and indexed by search engines. Elements within an SVG can be individually styled, animated, and made interactive — a circle can change color on hover, a chart can animate its bars on load, and a map can respond to click events. This programmability makes SVG the foundation of data visualization libraries like D3.js, charting frameworks, interactive infographics, and icon systems.
SVG integrates naturally with the web platform. It supports CSS styling (including external stylesheets), CSS and SMIL animations, filter effects (blur, drop shadow, color matrix), clipping paths, masks, gradients, and patterns. Text within SVG remains selectable and searchable, which is an accessibility and SEO advantage over rasterized text in images.
History
SVG development began in 1998 when the W3C solicited proposals for a vector graphics format for the web. Competing submissions from Microsoft (VML), Macromedia and Adobe (PGML), and others were synthesized into a unified specification. SVG 1.0 became a W3C Recommendation on September 4, 2001. SVG 1.1, published in 2003 and revised in 2011, modularized the specification and became the version most widely implemented in browsers.
Browser support was initially limited — Internet Explorer required a plugin, and mobile support was nonexistent. The turning point came around 2010-2012 as Chrome, Firefox, Safari, and later IE9 all added native SVG support. SVG 2.0, an ongoing W3C specification, aims to align SVG more closely with HTML5, CSS, and the DOM API, removing deprecated features and adding new capabilities like mesh gradients and hatching patterns. Today, SVG is universally supported across all modern browsers and is a standard part of every front-end developer's toolkit.
Technical Details
An SVG document is an XML file with the root element <svg> specifying a viewport width, height, and optionally a viewBox for coordinate system mapping. Drawing elements include <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, <path>, <text>, and <image> (for embedding raster images). The <path> element is the most powerful, using a compact syntax of move (M), line (L), cubic Bezier (C), quadratic Bezier (Q), arc (A), and close (Z) commands to define arbitrary shapes.
SVG supports a compositing model with opacity, blend modes, and the <filter> element for raster-based effects like Gaussian blur, displacement mapping, and convolution. Reusable components are defined with <defs> and instantiated with <use>, enabling efficient icon sprite systems. The coordinate system uses floating-point precision, and transforms (translate, rotate, scale, skew) can be applied to any element or group. When served as a web asset, SVG files benefit from gzip/brotli compression, often reducing file size by 60-80% because XML compresses extremely well.
Pros & Cons
Pros
- Infinitely scalable without quality loss — perfect for responsive web design
- Text-based XML format is editable, scriptable, and version-control friendly
- CSS styling and JavaScript interactivity built into the web platform
- Excellent compression when gzipped due to repetitive XML text structure
- Accessible — text is selectable, searchable, and readable by screen readers
Cons
- Not suitable for photographs or complex photographic imagery
- Complex SVGs with thousands of elements can cause rendering performance issues
- Browser rendering inconsistencies exist for advanced features like filters and text
- Security considerations when accepting SVG uploads (can contain scripts)
- Learning curve for hand-authoring path data and understanding the coordinate system
Common Use Cases
- Icon systems and design systems that scale across resolutions and display densities
- Interactive data visualizations and charts built with D3.js or similar libraries
- Logos and brand marks that must render sharply at any size from favicon to billboard
- Animated illustrations and micro-interactions on marketing websites
- Maps and floor plans with interactive hover and click behavior
- Technical diagrams and flowcharts that need to be resolution-independent