Why SVG is the Right Format for Your Web Icons and Logos

If you're serving your site's icons and logo as PNG files, you're leaving performance on the table. Here's what SVG gives you instead.

Smaller files

A typical logo SVG is 2–8 KB. The same logo as a 2× PNG for retina screens is often 30–80 KB. For a site with dozens of icons, that's several hundred kilobytes of avoidable payload.

Infinite resolution

A single SVG file looks sharp on a 1× screen, a 2× Retina display, and a 3× mobile screen. No srcset, no @2x variants, no multiple files. The browser renders it at whatever density the display demands.

Inline = zero network requests

Inline SVG in your HTML or component tree requires no HTTP request. It's already in the document.

// No request, no flash, no layout shift
function Logo() {
  return (
    <svg viewBox="0 0 24 24" fill="none">
      <path d="M12 2L2 22h20L12 2z" stroke="currentColor" />
    </svg>
  )
}

CSS-controllable

Inline SVG elements are part of the DOM. You can target them with CSS, animate with @keyframes, or drive with JavaScript.

.logo-path { transition: fill 0.2s ease; }
.logo:hover .logo-path { fill: #7c3aed; }

GZIP loves SVG

SVG is XML text — it compresses extremely well. A 6 KB SVG often compresses to under 2 KB over the wire with Brotli.

When not to use SVG

SVG isn't suited for photographs. The paths required to accurately trace a photo are far more complex and the resulting file far larger than WebP or AVIF. For photos, use modern image formats. For everything else — icons, logos, illustrations — SVG is almost always the right call.