The Complete Guide to SVG in 2026: From Icons to Complex Animations

SVG (Scalable Vector Graphics) became the standard for all web graphics in 2025-2026, replacing icon fonts and raster images for everything from simple icons to complex data visualizations. Combined with CSS and JavaScript, SVG enables animations and interactions that raster images can't achieve.

Here's the practical guide.

Basic Shapes

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Circle -->
  <circle cx="50" cy="50" r="40" fill="#4ade80" />

  <!-- Rectangle -->
  <rect x="10" y="10" width="80" height="30" fill="#60a5fa" rx="5" />

  <!-- Line -->
  <line x1="10" y1="90" x2="90" y2="10" stroke="#f87171" stroke-width="3" />

  <!-- Polygon -->
  <polygon points="50,10 90,90 10,90" fill="#fbbf24" />
</svg>

Paths

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Path: M=move to, L=line to, C=curve, Z=close -->
  <path
    d="M 10 50
       C 30 10, 70 10, 90 50
       C 70 90, 30 90, 10 50
       Z"
    fill="#a78bfa"
    stroke="#7c3aed"
    stroke-width="2"
  />

  <!-- Arc -->
  <path
    d="M 20 50 A 30 30 0 0 1 80 50"
    fill="none"
    stroke="#06b6d4"
    stroke-width="3"
  />
</svg>

CSS Animations

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.svg-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s ease-in-out forwards;
}

<svg viewBox="0 0 100 100">
  <path
    class="svg-path"
    d="M 10 50 Q 50 10 90 50 Q 50 90 10 50"
    fill="none"
    stroke="#4ade80"
    stroke-width="3"
  />
</svg>

Interactive SVG

const path = document.querySelector(".interactive-path");

path.addEventListener("mouseenter", () => {
  path.style.fill = "#f87171";
  path.style.transform = "scale(1.1)";
  path.style.transformOrigin = "center";
});

path.addEventListener("mouseleave", () => {
  path.style.fill = "#4ade80";
  path.style.transform = "scale(1)";
});

SVG Masks and Clipping

<svg viewBox="0 0 100 100">
  <defs>
    <clipPath id="circle-mask">
      <circle cx="50" cy="50" r="40" />
    </clipPath>
  </defs>

  <!-- Clipped image -->
  <image
    href="photo.jpg"
    width="100"
    height="100"
    clip-path="url(#circle-mask)"
  />
</svg>

SVG Sprites

<!-- sprite.svg (hidden) -->
<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 10v10h14V10" fill="none" stroke="currentColor" stroke-width="2"/>
  </symbol>
  <symbol id="icon-settings" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2"/>
    <path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83" stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>

<!-- Use -->
<svg width="24" height="24">
  <use href="#icon-home" />
</svg>

ViewBox and Responsiveness

<!-- Always scales to container width -->
<svg viewBox="0 0 16 9" preserveAspectRatio="xMidYMid meet">
  <!-- This SVG always maintains 16:9 aspect ratio -->
  <rect width="16" height="9" fill="#4ade80" />
</svg>

This article contains affiliate links. If you sign up through the links above, I may earn a commission at no additional cost to you.