Two Approaches: Progressive Enhancement vs Graceful Degradation

When using SVG as CSS background images there are two schools of thought for dealing with browsers that don't support SVG. Both are valid — the right choice depends on whether the pattern is decorative or structural.

Progressive Enhancement

Start with a solid, universally-supported foundation and layer SVG on top. Browsers that understand SVG get the fancy pattern; older browsers get a clean solid colour. 

/* Progressive Enhancement */
.hero {
  background-color: #6366f1;          /* fallback for no-SVG browsers */
  background-image: url('data:image/svg+xml;base64,...');
}

Because CSS parsers skip declarations they don't understand, a browser without SVG support simply ignores the background-image line and shows the background-color.

Graceful Degradation

Design first for full SVG support and add fallbacks with Modernizr. This makes sense when the pattern is integral to the design rather than decorative. 

/* Requires Modernizr SVG detection */
.hero {
  background-image: url('data:image/svg+xml;base64,...');
}

.no-svg .hero {
  background-image: url('/img/hero-fallback.png');
}

The .no-svg class is added to <html> by Modernizr when SVG is not supported. Libraries like svgweb can also polyfill SVG support in very old environments.

Inline vs External SVG

SVGeneration exports patterns as inline data URIs (base-64 encoded SVG embedded directly in CSS). This is ideal for background patterns because:

  • No extra HTTP request — the pattern is part of your stylesheet
  • Works perfectly across all modern browsers
  • Infinitely scalable — no pixelation at any screen density
  • Tiny file sizes (under 5 kb for most patterns)

Using the Downloaded SVG File

If you prefer an external file reference, download the SVG and reference it normally:

.hero {
  background-color: #f0f0f0;
  background-image: url('/patterns/my-pattern.svg');
  background-repeat: repeat;
  background-size: 200px;
}

Accessibility Note

SVG background patterns are purely decorative. Always ensure text that overlays a patterned background has sufficient colour contrast. Test with WebAIM Contrast Checker.

Browse Patterns → More Resources