SVG Pattern Element Guide for Repeating Fills

The <pattern> element in Scalable Vector Graphics (SVG) is a specialized container used to define reusable graphical tiles for filling or stroking shapes. This article explains the primary purpose of the SVG pattern element, how its coordinate systems work, and how it enables designers and developers to create seamless, scalable repeating backgrounds and textures without relying on external raster images.

Understanding the Purpose of the <pattern> Element

In SVG, shapes like rectangles, circles, and complex paths are typically filled with solid colors or gradients. The <pattern> element expands this capability by allowing any combination of vector elements—such as paths, circles, text, or shapes—to be grouped into a single tile that repeats horizontally and vertically across the surface of a target shape.

Instead of manually duplicating vector shapes across a canvas, you define the tile once within an SVG’s <defs> (definitions) section and reference it wherever a repeating fill is needed.

How the <pattern> Element Works

To use a pattern, you assign it a unique id attribute and then reference that ID in the fill or stroke attribute of another SVG element using the url(#pattern-id) syntax.

A basic pattern structure looks like this:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="dot-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="4" fill="#007ACC" />
    </pattern>
  </defs>

  <!-- Shape utilizing the pattern fill -->
  <rect width="200" height="200" fill="url(#dot-pattern)" />
</svg>

In this example, the circle is drawn inside a 20x20 tile. When applied to the rectangle, the pattern engine automatically repeats that 20x20 tile across the entire 200x200 area.

Key Attributes for Controlling Pattern Layout

The behavior of a repeating fill depends on two critical coordinate attributes:

• patternUnits: Determines the coordinate system for the pattern tile’s position (x, y) and size (width, height).
  • userSpaceOnUse: Sizes and positions the tile using absolute viewport coordinates (pixels). This is ideal for fixed-size patterns like grids or polka dots.
  • objectBoundingBox (default): Sizes and positions the tile relative to the dimensions of the shape referencing it, using values between 0 and 1 (or percentages).
• patternContentUnits: Determines the coordinate system for the shapes drawn inside the pattern tile. Like patternUnits, this can be set to either userSpaceOnUse (default) or objectBoundingBox.
• patternTransform: Applies transformations—such as rotation, scaling, or skewing—directly to the repeating pattern without altering the target shape.

Key Advantages of SVG Patterns

• Resolution Independence: Vector patterns scale infinitely without pixelation or loss of quality on high-density displays.
• Performance and File Size: Repeating a single defined element drastically reduces DOM complexity and file size compared to drawing hundreds of individual shapes manually.
• Dynamic Manipulation: Pattern colors, sizes, and internal shapes can be styled or animated using standard CSS and JavaScript.