SVG & Vector Graphics Guide

What is SVG?

SVG (Scalable Vector Graphics) is an XML-based format for 2D vector images. Unlike raster images (PNG, JPEG), SVGs scale infinitely without losing quality, making them perfect for logos, icons, illustrations, and UI elements.

SVGs are also part of the DOM, meaning you can style them with CSS, animate them with JavaScript, and make them interactive, something no image format can match.

SVG vs Raster Images

Feature          SVG              PNG/JPEG
────────────────────────────────────────────────
Scalability      Infinite         Fixed resolution
File size        Small (simple)   Varies by dimensions
Animation        CSS/JS native    Requires sprites/GIF
Accessibility    Text-based DOM   Alt text only
Compression      gzip-friendly    Already compressed
Browser support  All modern       Universal
Best for         Icons, logos     Photos, screenshots

SVG Basics

Every SVG starts with the <svg> element and uses a coordinate system defined by viewBox:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
  <rect x="10" y="70" width="80" height="20" rx="4" fill="#1e40af" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="12">
    Hello SVG
  </text>
</svg>

The viewBox="0 0 100 100" creates a 100×100 coordinate space. The SVG scales to fit its container while maintaining aspect ratio.

Common SVG Elements

• <circle>: circles, defined by center (cx, cy) and radius (r)
• <rect>: rectangles, with optional rounded corners (rx, ry)
• <ellipse>: ellipses with separate x/y radii
• <line>: straight lines between two points
• <polyline> / <polygon>: connected line segments (open vs closed)
• <path>: the most powerful element, using commands (M, L, C, A, Z) to draw any shape
• <text>: text that's searchable and accessible
• <g>: grouping element for organizing and transforming multiple shapes together

SVG Path Commands

The <path> element uses a mini-language of commands:

M x y    . Move to (start point)
L x y    . Line to
H x      . Horizontal line to
V y      . Vertical line to
C x1 y1 x2 y2 x y. Cubic Bézier curve
Q x1 y1 x y      . Quadratic Bézier curve
A rx ry rot large-arc sweep x y. Arc
Z        . Close path

Lowercase = relative coordinates
Uppercase = absolute coordinates

Optimizing SVGs

SVGs exported from design tools often contain bloat, editor metadata, unnecessary attributes, and redundant precision. Optimization can reduce file size by 30–70%:

• Remove editor metadata (Illustrator, Figma comments)
• Reduce decimal precision (e.g., 3.141592 → 3.14)
• Merge overlapping paths
• Remove empty groups and unused <defs>
• Convert shapes to paths when smaller
• Use short color formats (#fff vs #ffffff)

Try the SVG Optimizer to clean up your SVGs instantly.

SVG in CSS

SVGs can be used in CSS in several ways:

/* As background image */
.icon { background-image: url('icon.svg'); }

/* As CSS mask (for coloring) */
.icon {
  mask-image: url('icon.svg');
  background-color: currentColor;
}

/* As clip-path */
.shaped {
  clip-path: url(#myClipPath);
}

/* Inline data URI */
.bg {
  background: url("data:image/svg+xml,...");
}

Decorative SVG Patterns

SVGs are great for generating decorative backgrounds, waves, blobs, noise textures, and geometric patterns. These are lightweight alternatives to large background images:

• Wave generators for section dividers
• Blob generators for organic shapes
• Pattern generators for tileable backgrounds
• Noise textures for subtle grain effects

Accessibility

Make your SVGs accessible with proper ARIA attributes:

<!-- Decorative (ignored by screen readers) -->
<svg aria-hidden="true" focusable="false">...</svg>

<!-- Meaningful (announced by screen readers) -->
<svg role="img" aria-labelledby="title desc">
  <title id="title">Chart showing sales growth</title>
  <desc id="desc">Sales grew 40% from Q1 to Q4 2024</desc>
  ...
</svg>