The Complete Guide
to SVG Files

1. What is SVG?

SVG stands for Scalable Vector Graphics. It's an XML-based image format that describes two-dimensional graphics using mathematical paths, shapes, and text rather than a grid of pixels.

First developed by the W3C in 1999 and widely adopted by browsers in the 2010s, SVG has become the standard format for logos, icons, illustrations, charts, and any graphic that needs to look sharp at every size.

SVG vs Raster Images

Key Advantages of SVG

2. SVG Anatomy & Syntax

Under the hood, SVG files are plain text written in XML. Understanding the basic structure helps you edit, optimize, and debug SVGs confidently.

The SVG Element

Every SVG starts with the root <svg> element:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="200"
  height="200"
>
  <!-- shapes, paths, text go here -->
</svg>

• xmlns — XML namespace. Required for standalone SVGs, optional when inline in HTML.
• viewBox — Defines the coordinate system. 0 0 100 100 creates a 100x100 unit canvas.
• width/height — Display dimensions. If omitted, the SVG fills its container (responsive).

Core Shapes

SVG provides primitive shapes for common geometry:

<rect x="10" y="10" width="80" height="60" fill="#3B82F6" rx="8" />
<circle cx="50" cy="50" r="40" fill="#EF4444" />
<ellipse cx="50" cy="50" rx="40" ry="25" fill="#10B981" />
<line x1="0" y1="0" x2="100" y2="100" stroke="#000" stroke-width="2" />
<polygon points="50,5 95,95 5,95" fill="#F59E0B" />
<polyline points="10,90 40,30 70,60 100,10" fill="none" stroke="#8B5CF6" />

The Path Element

The <path> element is the most powerful SVG primitive. Its d attribute contains drawing commands:

Lowercase commands (m, l, c) use relative coordinates. Uppercase (M, L, C) use absolute.

Grouping & Reuse

<!-- Groups: apply transforms/styles to multiple elements -->
<g fill="#3B82F6" transform="translate(10, 10)">
  <rect width="20" height="20" />
  <circle cx="30" cy="10" r="10" />
</g>

<!-- Defs + Use: define once, reuse anywhere -->
<defs>
  <symbol id="icon-star" viewBox="0 0 24 24">
    <path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z" />
  </symbol>
</defs>
<use href="#icon-star" x="0" y="0" width="24" height="24" />
<use href="#icon-star" x="30" y="0" width="24" height="24" />

Gradients & Filters

<defs>
  <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#3B82F6" />
    <stop offset="100%" stop-color="#8B5CF6" />
  </linearGradient>
</defs>
<rect width="100" height="100" fill="url(#grad)" />

3. Creating SVG Files

There are several ways to create SVG files, ranging from AI generation to manual coding. The best method depends on your skill level and what you need.

Export Best Practices

• Convert text to outlines — Ensures fonts display correctly everywhere, no font dependency issues
• Flatten transforms — Apply all transforms to the actual coordinates for simpler code
• Remove metadata — Strip editor-specific data (Illustrator adds ~2KB of XML comments)
• Use viewBox — Always include viewBox for responsive scaling; omit width/height for fluid SVGs
• Close all paths — Especially for cutting machines, which require closed shapes

4. SVG Optimization

Raw SVGs from design tools are often bloated with metadata, redundant attributes, and unnecessary precision. Optimization can reduce file size by 30-80% without any visual change.

SVGO: The Standard Tool

SVGO (SVG Optimizer) is the industry-standard command-line tool for optimizing SVGs. It's used by React, Angular, and most build tools:

# Install SVGO
npm install -g svgo

# Optimize a single file
svgo input.svg -o output.svg

# Optimize all SVGs in a directory
svgo -f ./icons/ -o ./icons-optimized/

What SVGO Removes

Before & After

5. SVG on the Web

There are four ways to embed SVGs in web pages, each with different tradeoffs for styling, interactivity, caching, and performance.

Embedding Methods Compared

Responsive SVG

The secret to responsive SVGs is using viewBox without fixed width/height:

<!-- Responsive: fills container width, maintains aspect ratio -->
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="100" fill="#3B82F6" />
</svg>

<!-- CSS control -->
<style>
  svg { width: 100%; height: auto; }
</style>

The preserveAspectRatio attribute controls how the SVG fits when the container aspect ratio doesn't match the viewBox. Default is xMidYMid meet (center and contain). Use none to stretch to fill.

SVG Sprites

For icon systems, SVG sprites bundle multiple icons into one file:

<!-- sprites.svg: hidden sprite sheet -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l9-9 9 9M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" />
  </symbol>
</svg>

<!-- Usage anywhere in the page -->
<svg width="24" height="24"><use href="#icon-home" /></svg>
<svg width="24" height="24"><use href="#icon-search" /></svg>

6. SVG Accessibility

SVG has built-in accessibility features that most image formats lack. When used correctly, screen readers can convey the meaning of SVG graphics to visually impaired users.

Essential Attributes

<!-- Accessible inline SVG -->
<svg role="img" aria-labelledby="title desc" viewBox="0 0 100 100">
  <title id="title">Company Logo</title>
  <desc id="desc">A blue circle with white letter C in the center</desc>
  <circle cx="50" cy="50" r="45" fill="#3B82F6" />
  <text x="50" y="62" text-anchor="middle" fill="white" font-size="40">C</text>
</svg>

<!-- Decorative SVG (screen readers skip it) -->
<svg aria-hidden="true" focusable="false">
  <!-- purely decorative graphic -->
</svg>

Accessibility Checklist

7. SVG Animation

SVG elements can be animated with CSS, SMIL, or JavaScript — enabling effects from simple hover transitions to complex path-drawing animations.

CSS Animation (Recommended)

The most portable and performant approach. Works on any SVG element:

<style>
  .spin { animation: rotate 2s linear infinite; }
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Path drawing effect */
  .draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 3s ease forwards;
  }
  @keyframes draw {
    to { stroke-dashoffset: 0; }
  }
</style>

<svg viewBox="0 0 100 100">
  <circle class="spin" cx="50" cy="50" r="40" fill="#3B82F6" />
</svg>

JavaScript Libraries

Common Animation Patterns

• Path drawing — Animate stroke-dashoffset to reveal paths progressively
• Morphing — Transition between two path shapes (same number of points) using GSAP MorphSVG
• Hover effects — CSS transitions on fill, stroke, opacity, and transform
• Loading spinners — Rotate arcs or dash-animated circles
• Scroll-linked — Drive animation progress by scroll position with IntersectionObserver

8. SVG Compatibility

SVG works nearly everywhere in 2026, but some platforms have quirks. Here's the full compatibility picture.

Browser Support

Design Tools

Cutting Machines

CMS & E-Commerce

9. SVG for Business

SVG files power several profitable industries — from digital product sales to web performance optimization.

Platform-Specific Guides

We've written detailed guides for using SVG in specific platforms: