Developer Guide

How to Use SVG in Code

Complete developer guide to embedding, styling, and animating SVG in HTML, React, Vue, and more.

Method 1 — Inline SVG in HTML

Paste SVG code directly into your HTML. Gives full CSS and JS access to all SVG elements.

<!-- Inline SVG — full control -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="currentColor" />
</svg>

✓ Styleable with CSS ✓ Animatable ✓ No extra HTTP request

Method 2 — SVG as <img> Tag

Reference an SVG file like any image. Simplest method — no access to SVG internals.

<img src="/icons/logo.svg" alt="Company logo" width="200" height="80" />

✓ Browser caching ✓ Simple ✗ Can't style internal elements

Method 3 — SVG as CSS Background

Reference an SVG in CSS. Good for decorative backgrounds and icons in pseudo-elements.

.icon {
  background-image: url('/icons/arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}

React — Importing SVG Files

// Next.js — use as <img> or next/image
import Image from 'next/image';
import logoSrc from '@/public/logo.svg';

export function Logo() {
  return <Image src={logoSrc} alt="Logo" width={200} height={80} />;
}

// Or inline — paste the SVG JSX directly into a component
export function Icon() {
  return (
    <svg viewBox="0 0 24 24" className="w-6 h-6 text-primary" fill="currentColor">
      <path d="M12 2L2 7l10 5 10-5-10-5z" />
    </svg>
  );
}

Styling SVG with CSS

/* Target SVG elements with CSS */
svg path { fill: currentColor; }
svg:hover path { fill: var(--color-primary); }

/* Animate on hover */
svg { transition: transform 0.2s ease; }
svg:hover { transform: scale(1.1); }

Using currentColor

Set SVG fills to currentColor so they inherit from the parent text color — perfect for dark mode.

<svg fill="currentColor" viewBox="0 0 24 24">
  <path d="..." />
</svg>

<!-- Inherits text-blue-500 from the parent -->
<span class="text-blue-500">
  <MyIcon />
</span>