SVG: what it is, key concepts and usage in web development

What is SVG?

SVG — a vector graphics format based on XML, introduced in 2001 as a W3C recommendation. Unlike raster formats, SVG describes images through geometric primitives: points, lines, curves and polygons. An SVG file is a plain text XML document that can be read, edited and compressed with standard tools.

The SVG architecture includes several key concepts. viewBox defines a virtual coordinate system independent of the actual element dimensions. For example, viewBox="0 0 100 100" creates a 100×100 square grid, inside which all coordinates are fixed. When the container width or height changes, the content scales proportionally.

According to the W3C SVG 2 Specification, the modern version of SVG supports gradients, masks, filters, text with arbitrary positioning, interactivity via JavaScript and animation via CSS and SMIL. SVG is integrated into the DOM as a full HTML element, allowing programmatic control over every graphic primitive.

In mobile development, SVG is also used in iOS via UIGraphicsImageRenderer and in Android via VectorDrawable — both formats convert SVG-like descriptions into hardware-accelerated rasters on the GPU.

History and Evolution of the SVG Format

SVG 1.0 became a W3C recommendation in 2001, SVG 1.1 in 2003, and SVG 2.0 has been under development since 2012. The main innovation of SVG 2 is deeper CSS integration, support for compositing and blending modes, and the ability to use SVG in HTML without namespace prefixes.

Although SVG 2 has not yet reached Recommendation status, modern browsers already support most of its functionality. Chrome, Safari, Firefox and Edge have nearly full support for SVG 1.1 and a significant portion of SVG 2.

Basic SVG Elements

SVG provides a set of elements for describing two-dimensional graphics. Each element has attributes that define its position, size and visual appearance. Attributes can be set as xml attributes or via CSS properties.

• <rect> — rectangle with attributes x, y, width, height, rx, ry (corner rounding).
• <circle> — circle with attributes cx, cy (center) and r (radius).
• <ellipse> — ellipse with attributes cx, cy, rx, ry.
• <line> — line segment with attributes x1, y1, x2, y2.
• <polyline> — polyline with attribute points (coordinate list).
• <polygon> — closed polygon with attribute points.
• <path> — arbitrary path with attribute d (commands: M, L, C, Q, A, Z).
• <text> — text element with attributes x, y, font-size, font-family.

The path element — the most powerful and flexible SVG element. The d attribute contains a sequence of commands: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Each command has an absolute or relative form (uppercase or lowercase letter).

SVG also supports element grouping via <g>. The group inherits visual attributes (fill, stroke, transform) to all child elements. This allows applying a single style to a whole set of shapes and controlling their position via a single transform.

SVG vs Raster Graphics: Format Comparison

The main difference between SVG and raster formats (JPEG, PNG, WebP) is the way information is stored. Raster stores the color of each pixel in a fixed-size grid. SVG stores mathematical commands for rendering shapes. This difference determines all the advantages and disadvantages of the formats.

According to HTTP Archive, 2025, 68% of websites use SVG for icons, 34% for illustrations and 22% for logos. The average SVG icon size is 0.5–2 KB, while a raster icon of similar quality is 5–20 KB in PNG format.

SVG is not suitable for photographs and complex raster images — the XML description size would exceed the equivalent JPEG. Recommended SVG applications: icons, logos, illustrations, diagrams, charts, interface elements with responsive design.

When to Choose SVG vs a Raster Format

SVG is the optimal choice for interface elements that need to look sharp on Retina displays and at any browser zoom level. Raster is for photographs, complex textures and images with millions of colors where vector description would be overly complex.

Hybrid approach — combining SVG for interface elements and WebP/AVIF for photo content — provides the best balance between quality and page load performance.

Inline SVG and CSS Styling

Inline SVG — embedding SVG markup directly into an HTML document rather than as a separate file via <img> or background-image. The advantage of inline SVG is that SVG elements become part of the DOM and can be styled via CSS, controlled via JavaScript and animated without additional server requests.

Unlike <img src="icon.svg">, where SVG is isolated in the shadow DOM, inline SVG inherits colors and fonts from the parent document. This allows implementing, for example, changing icon color on hover via the CSS pseudo-class :hover without loading a separate file for each state.

According to CSS-Tricks, inline SVG is the recommended way to use icons in modern web applications. CSS properties fill, stroke, stroke-width apply directly to SVG elements. For CSS customization, it is important that the source SVG does not have fill and stroke set as inline attributes — otherwise CSS cannot override them.

• Advantages: CSS styling, JS control, no HTTP requests, viewBox responsiveness.
• Disadvantages: increased HTML page size, inability to cache separately from HTML.
• Alternative: SVG sprites — combining multiple SVGs into one file and using <use href="#id">.

SVG sprites solve the caching problem: all icons are collected in one file, the browser loads it once, and individual icons are accessed via <use> specifying the id of the desired element inside the sprite.

SVG Animation: CSS and SMIL

CSS SVG animation — the most common and performant way to animate vector graphics in the browser. CSS properties such as transform, opacity and fill apply to SVG elements just as they do to HTML elements. For animation along an arbitrary path, the CSS property offset-path is used.

SMIL (Synchronized Multimedia Integration Language) — an SVG built-in animation mechanism independent of CSS. The <animate>, <animateTransform> and <animateMotion> elements allow animating any SVG attributes without JavaScript or CSS. SMIL animation is guaranteed to be synchronized with the browser frame rate.

According to MDN Web Docs, SMIL is supported in all modern browsers, but CSS animation is considered more predictable and performant. The main use case for SMIL is animating attributes that are not accessible via CSS, such as d (path) of the <path> element.

JavaScript + requestAnimationFrame gives maximum control over SVG animation. Web developers use libraries like GSAP and Anime.js for complex animation sequences with timelines and easing functions that are difficult to implement with pure CSS.

Code Examples: Creating SVG Graphics

The first example is a simple house icon using basic SVG elements. All shapes are rect and polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

The second example shows a rotating loader animation via CSS. It uses <circle> with the stroke-dasharray attribute to create a dashed outline:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

The third example uses the GSAP library to animate a path for smooth contour drawing. GSAP works with the stroke-dashoffset attribute, creating a line-appearing effect:

// Draw path with GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});