SVG stands for Scalable Vector Graphics — an XML-based format for describing two-dimensional graphics. Unlike raster images (PNG, JPEG), SVG is resolution-independent: it looks crisp on a 4K display and a 72 DPI printer alike.

Why SVG for Backgrounds?

  • Infinitely scalable — no blurriness at any size or pixel density
  • Tiny file sizes — geometric patterns compress extremely well
  • CSS-native — embed directly in a stylesheet as a data URI
  • Animatable — SVG shapes can be animated with CSS or SMIL
  • Accessible — SVG is part of the DOM and can carry semantics

Basic SVG Syntax

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#6366f1" />
</svg>

Every SVG document starts with the <svg> root element and a namespace declaration. Inside, you use shape elements like <circle>, <rect>, <path>, <line>, and grouping with <g> and <defs>.

Patterns in SVG

The <pattern> element defines a repeating tile. Combine it with <defs> and fill="url(#id)" to paint any shape with a tiling pattern:

<defs>
  <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
    <circle cx="5" cy="5" r="3" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#dots)" />
How to Use SVG → Browse Patterns