What is SVG?

Vector vs raster

Every image on a screen is ultimately a grid of pixels. The question is when those pixels are decided.

A raster image (JPEG, PNG, WebP, GIF) bakes the pixel grid in at creation time. When you zoom in or display it on a high-density screen, the browser has to invent new pixels by interpolating — which is why photos look blurry when stretched beyond their native resolution.

A vector image stores geometry: "draw a circle at position (50, 50) with radius 40, filled orange." The renderer converts that geometry to pixels on demand, at whatever resolution the display needs. The math is always exact, so the result is crisp at 48 px or 4800 px — no blur.

SVG (Scalable Vector Graphics) is the web's native vector format. It is plain XML that your browser reads and draws at display time. The following three figures show the same SVG star rendered at three different sizes — all from one source, all perfectly sharp:

Contrast this with raster formats, as shown above: the same star exported as a 32×32 PNG goes blocky and blurry when stretched to 160 px because the browser can only interpolate the fixed pixel grid. For photographs and detailed imagery where raster excels, see the Images tutorials.

The trade-off at a glance

• SVG strengths: resolution-independent, tiny file size for line art, editable in a text editor, CSS/JS accessible, screen-reader friendly with proper markup.
• Raster strengths: compact file size for photographic detail, universal tool support, predictable rendering.

Anatomy of an SVG document

An SVG file is well-formed XML. The root element is <svg>; everything inside is drawn in document order — elements that appear later paint on top of earlier ones, just like painter's algorithm.

Here is the smallest SVG worth studying:

Key attributes explained

• viewBox="0 0 100 100" — defines the SVG's internal coordinate system. The four numbers are min-x min-y width height. All child elements use these coordinates. Think of it as the "canvas" the shapes are drawn on, independent of how big the SVG appears on screen.
• width="120" height="120" — the display size in CSS pixels. The browser scales the 100×100 viewBox to fit 120×120 px, stretching or shrinking proportionally. Omitting both makes the SVG stretch to fill its container.
• xmlns="http://www.w3.org/2000/svg" — the XML namespace declaration. Required in a standalone .svg file so parsers know which element vocabulary to use. When SVG is inline inside an HTML5 document, the browser already knows the namespace and this attribute can be omitted.
• role="img" aria-label="…" — accessibility. Without these, screen readers may read out every child element separately. Adding role="img" tells assistive technology to treat the whole SVG as a single image, and aria-label (or a <title> child element) provides the text alternative.

Drawing order matters

SVG renders children from top to bottom in document order. A shape listed later paints over earlier ones. In this two-shape example the teal circle is drawn after the orange rectangle, so it appears in front:

When to use SVG (and when not to)

SVG excels for graphics made of geometric shapes and mathematical curves. It is a poor fit for photographic content.

Good candidates for SVG

• Logos and wordmarks — must look crisp on retina displays and at every zoom level.
• UI icons — small, frequently recolored, need to scale to different sizes.
• Diagrams and flowcharts — text and lines at any scale.
• Data visualizations and charts — SVG elements can be generated dynamically with JavaScript and kept accessible.
• Illustrations and line art — any artwork that is fundamentally geometric or drawn with a pen tool.
• Animations — CSS and SMIL animations on SVG elements are resolution-independent and performant.

Not a good fit for SVG

• Photographs — a photographic JPEG is far smaller and more detailed than an SVG trying to approximate it with thousands of colored shapes. Use raster formats for photos.
• Highly complex scans or illustrations — if vector tracing produces a file larger than an equivalent JPEG/WebP, the raster format wins on performance.