SVG Format: The Complete Technical Guide

SVG Format: The Complete Technical Guide

SVG (Scalable Vector Graphics) is an XML-based vector image format standardized by the W3C. Unlike raster formats (JPEG, PNG, WebP) that store pixels, SVG stores mathematical descriptions of shapes, paths, text, and visual effects. The defining property is infinite scalability — an SVG at 1×1 pixel and at 10,000×10,000 pixels is rendered from the same file with identical sharpness. SVG 1.1 (2003, revised 2011) is the widely implemented standard; SVG 2.0 is a working draft that extends it.

Core Concepts: Raster vs. Vector

Raster images (PNG, JPEG, WebP) store a grid of pixel colors. Enlarging a raster image interpolates between pixels, causing blurring. File size grows with pixel dimensions.

Vector images (SVG, EPS, AI) store geometric instructions:

• "Draw a circle at (50,50) with radius 30, filled red, stroke blue 2px"
• "Render the text 'Hello' at (10,20) using font Arial 16px"
• "Draw a Bézier path from (0,0) through (50,100) to (100,0)"

SVG is rendered by the SVG engine at display time. At any scale, the math produces the correct coordinates. File size depends on geometric complexity, not output resolution.

When to use SVG: Logos, icons, illustrations, diagrams, charts, UI elements, maps — anything created with shapes and paths. Not suitable for: Photographs, complex textures, video frames — use JPEG/WebP for these.

SVG File Structure

SVG is XML. A minimal SVG file:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="200"
     viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" fill="#e74c3c" stroke="#c0392b" stroke-width="4"/>
  <text x="100" y="108" text-anchor="middle" font-size="24" fill="white">SVG</text>
</svg>

Key SVG elements and attributes:

<svg>: Root element. Required attributes:

• xmlns: XML namespace http://www.w3.org/2000/svg
• width / height: Intrinsic dimensions (px, em, %, or unitless)
• viewBox: "minX minY width height" — defines the coordinate space. Enables scaling without changing coordinates.

<g>: Group element. Applies shared transforms and styles to children. The SVG equivalent of a layer group.

<rect>: Rectangle. Attributes: x, y, width, height, rx (corner radius), ry.

<circle>: Circle. Attributes: cx, cy, r.

<ellipse>: Ellipse. Attributes: cx, cy, rx, ry.

<line>: Line segment. Attributes: x1, y1, x2, y2.

<polyline>: Connected line segments. Attribute: points="x1,y1 x2,y2 ...".

<polygon>: Closed polygon. Attribute: points.

<path>: The most powerful element — draws arbitrary curves and shapes using a compact command language.

<text>: Text rendering. Attributes: x, y, font-size, font-family, text-anchor (start/middle/end), dominant-baseline.

<image>: Embeds raster images (PNG, JPEG) or other SVGs. Attribute: href with data URI or URL.

<defs>: Container for reusable elements (gradients, filters, symbols, patterns) that are referenced but not rendered directly.

<use>: Instantiates a referenced element. <use href="#my-icon" x="50" y="50"/> renders the element with id my-icon at (50,50). Enables efficient icon systems.

The Path Element: Command Language

<path d="..."> uses a compact command language:

Lowercase versions (m, l, h, v, c, q, a, z) use relative coordinates.

Example: A rounded star or the classic heart shape can be drawn with a single path using C commands.

Styling: CSS and Presentation Attributes

SVG elements are styled via:

1. Presentation attributes: fill="red" stroke="blue" stroke-width="2" on the element
2. Inline style: style="fill: red; stroke: blue;" (CSS syntax)
3. External/embedded CSS: <style>circle { fill: red; }</style> in <defs> or linked stylesheet

CSS cascade applies: external stylesheet < embedded style < inline style < presentation attributes (with some nuances for inheritance).

Common styling properties:

• fill: Fill color (#hex, rgb(), hsl(), url(#gradient-id), none)
• stroke: Stroke color
• stroke-width: Stroke thickness in user units
• stroke-dasharray: Dash pattern (e.g., "5 3" = 5px dash, 3px gap)
• opacity: Overall opacity (0–1)
• fill-opacity / stroke-opacity: Per-property opacity
• transform: translate(x,y), rotate(angle cx cy), scale(sx sy), matrix(a b c d e f)
• clip-path: Clipping mask reference
• mask: Alpha mask reference

Gradients and Patterns

<defs>
  <!-- Linear gradient -->
  <linearGradient id="sunset" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#f39c12"/>
    <stop offset="100%" stop-color="#e74c3c"/>
  </linearGradient>

  <!-- Radial gradient -->
  <radialGradient id="glow" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="white" stop-opacity="1"/>
    <stop offset="100%" stop-color="white" stop-opacity="0"/>
  </radialGradient>

  <!-- Repeating tile pattern -->
  <pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse">
    <circle cx="5" cy="5" r="3" fill="#3498db"/>
  </pattern>
</defs>

<rect width="200" height="200" fill="url(#sunset)"/>
<circle cx="100" cy="100" r="80" fill="url(#glow)"/>
<rect width="200" height="200" fill="url(#dots)"/>

Filters

SVG filters enable raster-like effects on vector shapes:

<defs>
  <filter id="blur">
    <feGaussianBlur stdDeviation="3"/>
  </filter>
  <filter id="drop-shadow">
    <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="rgba(0,0,0,0.5)"/>
  </filter>
</defs>
<rect width="100" height="100" fill="red" filter="url(#blur)"/>

Filter primitives: feGaussianBlur, feColorMatrix, feComposite, feMerge, feDisplacementMap, feTurbulence, feMorphology, feConvolveMatrix, feBlend. Chains of primitives create complex effects (emboss, glow, glass, noise textures).

Animation

SVG supports three animation systems:

1. SMIL animations (SVG native): <animate>, <animateTransform>, <animateMotion> elements within SVG. Deprecated in Chrome (2016) but re-supported.
2. CSS animations/transitions: Applied to SVG elements via CSS. @keyframes and transition work on SVG presentation attributes that map to CSS properties.
3. JavaScript/Web Animations API: Full programmatic control. Libraries: GSAP, Anime.js, Snap.svg, D3.js.

SVG in HTML5

SVG can be used in HTML in four ways:

1. Inline SVG: <svg> directly in HTML markup. Full CSS/JS access, can reference page stylesheets. Best for interactive SVGs.
2. <img src="logo.svg">: Simple embedding. No CSS/JS access, no animation (for security). Cached like any image.
3. CSS background: background-image: url('icon.svg'). Same restrictions as <img>.
4. <object data="logo.svg">: Full SVG including scripts runs in an embedded context.

Optimization

SVG files from design tools (Illustrator, Inkscape, Figma) contain unnecessary metadata. Optimization tools:

# SVGO (Node.js) — industry standard optimizer
svgo input.svg -o output.svg

# SVGO with custom config (preserve IDs, disable certain plugins)
svgo input.svg --config=svgo.config.js

# Inkscape command-line optimization
inkscape --export-plain-svg=output.svg input.svg

# Check compressed size (SVG compresses very well with gzip/brotli)
gzip -k output.svg && ls -lh output.svg.gz

Typical SVGO optimizations: remove editor metadata (<sodipodi:, <inkscape:), collapse groups, merge paths, remove redundant attributes, minify coordinates (reduce decimal places), convert absolute to relative path commands.

Embedding Fonts

<!-- Embed font as base64 -->
<defs>
  <style>
    @font-face {
      font-family: 'MyFont';
      src: url('data:font/woff2;base64,...') format('woff2');
    }
  </style>
</defs>
<text font-family="MyFont" font-size="24">Embedded font text</text>

For SVGs that will be opened in isolation (not in a browser that can load external fonts), embedding fonts as base64 ensures correct rendering. For web use, reference the same font the page already loads.

Conversion Commands

# PNG/JPEG to SVG (tracing — approximate, not lossless)
potrace bitmap.bmp -s -o output.svg        # potrace (black/white)
autotrace --output-format=svg input.png > output.svg  # autotrace (color)

# SVG to PNG at specific resolution
inkscape --export-filename=output.png --export-width=1024 input.svg
convert -density 300 input.svg output.png  # ImageMagick

# SVG to PDF (vector, lossless)
inkscape --export-filename=output.pdf input.svg
cairosvg input.svg -o output.pdf

# SVG to EPS
inkscape --export-filename=output.eps input.svg

# Batch SVG to PNG 512px
for f in *.svg; do inkscape --export-filename="${f%.svg}.png" --export-width=512 "$f"; done

Related conversions

Most teams that read this guide convert images in one of these directions:

• JPG to WEBP
• PNG to JPG
• HEIC to JPG
• PNG to WEBP
• TIFF to PNG
• RAW to JPG