File Size Benchmarks
Real-world size comparison for a 20×20px polka-dot pattern: SVG ≈ 85 bytes (base64: 116 bytes) | PNG ≈ 800 bytes | WebP ≈ 540 bytes | AVIF ≈ 420 bytes. At the smallest tile size, SVG is 5–10× smaller than raster formats. For a complex 300×300 pixel pattern, SVG can be 2KB vs PNG 12KB — still significantly smaller.
When SVG Wins
SVG is always the best choice for: geometric patterns (lines, circles, polygons, paths), gradient-based patterns, patterns that need colour theming, patterns used across multiple tile sizes, and any pattern that will appear on high-DPI displays. The mathematical nature of SVG means it scales perfectly to 4K displays without any additional file size.
When Raster Wins
Raster formats win for: photographic textures (linen, paper, concrete), hand-drawn patterns with organic imperfections, patterns with complex noise/grain effects that SVG filters can't reproduce efficiently, and any pattern wider than about 500px where the SVG file size would exceed a WebP equivalent.
PNG: The Legacy Format
PNG (Portable Network Graphics) uses lossless compression. It's excellent for patterns with flat colours and hard edges — the compression algorithm handles these extremely well. PNG supports alpha transparency, making it suitable for overlay patterns. Drawback: files are significantly larger than WebP/AVIF equivalents, and 100% of modern browsers support better alternatives.
WebP: The Modern Raster Choice
WebP (Google's format) is 25–35% smaller than equivalent PNG files for the same quality. Supported by 97% of browsers as of 2026. For raster pattern tiles, WebP is the best balance of support and compression. Use <picture> element with WebP as primary and PNG as fallback.
AVIF: Next-Generation Compression
AVIF achieves 50% better compression than WebP for photographic content and performs similarly for patterns. Browser support is at 93% as of 2026. For new projects targeting modern browsers, AVIF is the right raster choice. For patterns, the tiny file sizes mean the format difference is minimal — an SVG will still beat both for geometric patterns.
The Hybrid Approach
For maximum compatibility and quality: use SVG for all geometric patterns (the vast majority of background patterns), use AVIF/WebP for photographic textures with PNG fallback, and use a build-time pipeline (Vite, webpack) to automatically convert raster assets to modern formats. Never use GIF for patterns — WebP with animation or CSS animation is always superior.