The Complete Guide to SVG Background Patterns

Q: The Element

The core of every SVG tile is the <pattern> element. It lives inside <defs> and defines a rectangular area that the browser repeats infinitely. The two most important attributes are patternUnits (which coordinate system to use) and patternContentUnits (which coordinate system the shapes inside use). Setting both to userSpaceOnUse gives you pixel-perfect control.

Q: Embedding as a CSS Data URI

Once you have your SVG string, convert it to base64 using btoa(svgString) in JavaScript or base64_encode($svg) in PHP. Wrap it in a CSS data URI and you have a portable, self-contained background that works without any external files.

What Is an SVG Pattern?

SVG (Scalable Vector Graphics) patterns are repeating tiles defined entirely in XML markup. Unlike raster images, they are resolution-independent — meaning they look razor-sharp at any zoom level, on any display density, from a 1× monitor to a 4× OLED phone screen. Crucially, SVG patterns can be embedded directly inside a CSS background-image property as a base64-encoded data URI, eliminating any extra HTTP requests.

The <pattern> Element

The core of every SVG tile is the <pattern> element. It lives inside <defs> and defines a rectangular area that the browser repeats infinitely. The two most important attributes are patternUnits (which coordinate system to use) and patternContentUnits (which coordinate system the shapes inside use). Setting both to userSpaceOnUse gives you pixel-perfect control.

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
  <defs>
    <pattern id="dots" width="20" height="20"
             patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="3" fill="#6366f1"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dots)"/>
</svg>

Embedding as a CSS Data URI

Once you have your SVG string, convert it to base64 using btoa(svgString) in JavaScript or base64_encode($svg) in PHP. Wrap it in a CSS data URI and you have a portable, self-contained background that works without any external files.

.hero {
  background-color: #f5f5ff;
  background-image: url('data:image/svg+xml;base64,PHN2Z...');
  background-repeat: repeat;
  background-size: auto;
}

patternUnits vs patternContentUnits

The most common source of confusion with SVG patterns is the distinction between patternUnits (controls the tile bounding box) and patternContentUnits (controls child element coordinates). objectBoundingBox sizes relative to the element being filled (0–1 range), while userSpaceOnUse uses absolute pixel values. For background patterns, always prefer userSpaceOnUse for both — it is far more predictable.

Optimizing SVG Pattern File Size

SVG patterns are inherently compact, but there are tricks to make them even smaller. Remove unnecessary attributes, use short decimal values (round to 1–2 places), prefer <use> to repeat elements rather than duplicating markup, and eliminate whitespace. A polka-dot pattern can be under 100 bytes. A complex moroccan tile should still fit under 500 bytes.

Browser Compatibility

SVG background-image data URIs are supported by 100% of modern browsers — Chrome, Firefox, Safari, Edge. The only caveat is Internet Explorer 8 and below, where you need a PNG fallback. Use the progressive enhancement approach: declare background-color first, then background-image — older browsers silently ignore the data URI.

Key Takeaways

SVG patterns are lightweight, infinitely scalable, and embed directly in CSS. Use patternUnits="userSpaceOnUse", keep shapes simple, base64-encode for portability, and always provide a background-color fallback. Download the cheat sheets below for quick reference.