What Is an SVG? A Complete Guide to Scalable Vector Graphics (2026)

SVG files are plain-text XML documents that describe graphics using geometric primitives. Instead of storing color data for each pixel (like PNG or JPG), SVG stores instructions for drawing shapes.

Core SVG elements:

• <path> — The most versatile element, defining arbitrary shapes via the d attribute with move, line, curve, and arc commands
• <rect>, <circle>, <ellipse> — Basic shape primitives
• <text> — Renders text that remains selectable and searchable
• <g> — Groups elements for collective transforms and styling
• <defs> — Defines reusable elements like gradients, patterns, and clip paths

Browsers parse the XML and render the graphics using the GPU at whatever resolution the display requires. This is why SVGs look crisp on Retina displays, 4K monitors, and any zoom level — the browser simply recalculates the math at the new resolution.

Understanding the fundamental differences between vector and raster graphics helps you choose the right format for every situation.

Characteristic	SVG (Vector)	PNG/JPG (Raster)
Data storage	Mathematical shapes (XML)	Pixel grid (binary)
Scalability	Infinite — no quality loss	Fixed resolution
Best for	Icons, logos, illustrations, charts	Photographs, complex textures
File size (simple graphic)	1–5 KB	5–20 KB
File size (photograph)	Very large, impractical	Small to moderate
CSS/JS manipulation	Full control when inlined	None
Animation	CSS and SMIL support	GIF/APNG only
Text searchability	Text remains selectable	Text is pixels

Rule of thumb: If the graphic has clean lines, flat colors, and geometric shapes — use SVG. If it's a photograph or has complex textures — use a raster format.

SVGs can be embedded in web pages in four different ways, each with distinct trade-offs:

• Inline SVG (<svg> in HTML) — Full CSS/JS control, no extra HTTP request, increases HTML size. Best for interactive icons and animated graphics.
• Image tag (<img src="icon.svg">) — Simple, cacheable, but no CSS/JS manipulation. Best for static decorative graphics.
• CSS background (background-image: url(icon.svg)) — No HTML markup needed, cacheable. Best for decorative patterns and pseudo-element icons.
• Data URI (url('data:image/svg+xml,...')) — Eliminates HTTP request, embeds directly in CSS. Best for small icons used in CSS-only components.

For most projects, inline SVG is the best default for UI icons because it allows color changes via CSS custom properties and supports hover/focus states.

SVGs need proper accessibility attributes to be usable by screen readers and assistive technology:

• Add role="img" and aria-label="Description" to decorative SVGs that convey meaning
• Use <title> inside the SVG for a tooltip and accessible name
• Use <desc> for longer descriptions of complex illustrations
• Add aria-hidden="true" to purely decorative SVGs that don't convey information
• Ensure sufficient color contrast for SVG text and meaningful graphic elements

Testing with a screen reader (VoiceOver, NVDA) confirms your SVGs are properly announced.

While SVGs are generally lightweight, complex SVGs can impact performance. Keep these guidelines in mind:

• Simplify complex paths — Reduce the number of path points in illustrations. Fewer points means smaller files and faster rendering.
• Avoid SVG filters for heavy effects — SVG filters (<feGaussianBlur>, <feDropShadow>) are expensive to render. Use CSS equivalents when possible.
• Limit inline SVGs on a page — Hundreds of inline SVGs increase DOM size. Consider using an SVG sprite sheet with <use> references instead.
• Optimize before serving — Run all SVGs through an optimizer to strip metadata and reduce path precision.

For most websites with typical icon sets (20–50 icons), SVG performance is excellent and far superior to loading equivalent PNG sprites.