Why SVG Outperforms Raster for Patterns
A polka-dot PNG at 200×200 px weighs roughly 800 bytes. The same pattern as SVG is under 120 bytes — and renders perfectly at any scale. For patterns that tile, SVG's mathematical description is orders of magnitude more efficient than storing actual pixel data.
Measuring Paint & Composite Cost
Open Chrome DevTools → Performance tab → record while scrolling. Look at the "Painting" and "Composite Layers" rows in the flame chart. SVG background patterns with background-attachment: fixed or CSS filters trigger full repaints on scroll — avoid them. Static repeated patterns are essentially free after the first paint.
Reducing SVG Complexity
Every extra path node, filter, or gradient adds GPU work. Keep pattern tiles under 20 SVG elements. Use <use xlink:href> or <use href> to reuse shapes. Round coordinates to integers where possible — sub-pixel rendering hints cost CPU cycles. Remove xmlns:xlink if you aren't using it.
<!-- ❌ Verbose -->
<circle cx="10.000000" cy="10.000000" r="3.000000"
fill="#6366f1" stroke="none" stroke-width="0"/>
<!-- ✅ Optimized -->
<circle cx="10" cy="10" r="3" fill="#6366f1"/>Avoiding Repaint Triggers
SVG filters (feGaussianBlur, feTurbulence) are GPU-expensive. Patterns using these should be rendered to a static image at build time if performance is critical. On mobile devices, large blurred patterns can cause janky scroll — benchmark with DevTools CPU throttling set to 4× or 6× slowdown.
Lazy Loading Large Pattern Pages
When a page has many SVG background elements, defer off-screen pattern rendering. Use the content-visibility: auto CSS property on pattern-heavy sections — the browser skips rendering until they are near the viewport, reducing initial paint time by up to 40% on pattern-heavy pages.
Inlining vs External SVG Files
Inlining as base64 data URI adds ~33% to the encoded size but eliminates an HTTP request. For small patterns (under 500 bytes), always inline. For large complex patterns exceeding 2KB, serve as an external .svg file with long-term caching headers (Cache-Control: public, max-age=31536000, immutable) and reference it in CSS as a URL.
SVGO: The Gold Standard Optimizer
SVGO (SVG Optimizer) is a Node.js tool that removes redundant attributes, collapses transforms, rounds coordinates, and strips metadata. Running SVGO on a hand-authored SVG pattern typically reduces file size by 40–60%. Integrate it into your build pipeline: npx svgo --multipass pattern.svg.