SVG repeating patterns

An SVG repeating pattern is built with the pattern element. You define a single tile of artwork once, usually inside defs, give it an id, and reference it as the fill or stroke of another shape. The renderer then repeats that tile in both directions across the shape's area and clips anything outside it. The pattern does not draw anything until a shape uses it, and the tile stays as vector geometry unless the tile itself contains an embedded image.

How the pattern element works

A pattern has two parts: the tile definition, which sets the tile's size and position, and the tile content, which is the shapes drawn inside it. Any shape that can be filled, such as a rect, circle or path, can point to the pattern with a fill value in the form url(#id). The fragment below fills a 64 by 64 square with a grid of dots spaced 8 units apart. It is written as inline SVG. A standalone .svg file also needs the standard SVG namespace declaration on its root element.

<svg viewBox="0 0 64 64" width="64" height="64">
  <defs>
    <pattern id="dots" width="8" height="8" patternUnits="userSpaceOnUse">
      <circle cx="4" cy="4" r="1.5" fill="#1a1a1a"/>
    </pattern>
  </defs>
  <rect width="64" height="64" fill="url(#dots)"/>
</svg>

Attributes that control the tile

• width and height: the size of one tile. Without them the pattern has no area and renders nothing.
• x and y: offset where the tile grid starts, which lets you shift the repeat relative to the shape.
• patternUnits: sets the coordinate system for x, y, width and height. The default, objectBoundingBox, treats the values as fractions of the filled shape's bounding box, so a width of 0.25 gives four tiles across. With userSpaceOnUse, the values are ordinary user-space units, as in the example above.
• patternContentUnits: sets the coordinate system for the shapes inside the tile. The default is userSpaceOnUse. Pairing it with an objectBoundingBox tile is a common source of confusion when the content seems to ignore the tile size.
• viewBox and preserveAspectRatio: scale the tile content to fit the tile. When a viewBox is present, patternContentUnits has no effect.
• patternTransform: rotates, skews or scales the whole tile grid. A common use is turning straight stripes into diagonal ones.
• href: lets one pattern inherit attributes and content from another. Older files use xlink:href for this.

How it differs from other ways of repeating artwork

• Copying shapes by hand: duplicating a motif many times produces real, separate paths that can be edited one by one. A pattern stores the motif once and repeats it at render time, which keeps the file smaller and easier to change, but the repeats are not individual objects.
• The use element: use places one copy of a referenced element at a single position. A pattern repeats its tile automatically across an area.
• CSS background repetition: background-repeat tiles an image behind an HTML element and belongs to the page's styling. A pattern lives inside the SVG and travels with the file, so it still works where page CSS does not apply.
• Raster tiles: a repeated PNG or JPEG tile is fixed at its pixel resolution. A pattern made of vector shapes is redrawn at whatever size it is displayed.

Vector content versus embedded images inside a pattern

A pattern tile can contain an image element, so a file that uses pattern fills is not necessarily all vector. A .svg extension or a pattern fill does not prove the tile is made of editable paths. To find out, open the file in a text or code editor and inspect what sits inside the pattern element. Also keep in mind that thumbnails and previews of SVG files are often rasterized, so a crisp preview says nothing about how the tile is built. Tile edges need attention too. Content that crosses the tile boundary is clipped, so a seamless motif has to repeat the overlapping part on the opposite edge. Anti-aliasing at those edges can sometimes leave faint seams at certain zoom levels.

What this means for favicon SVG files

A pattern that reads well at full size often turns into noise or moiré at typical favicon sizes. At those sizes each tile may be only a pixel or two wide. If a texture is part of the brand mark, check it at the smallest size it will actually appear. A simplified favicon variant may need a flat fill or a few large shapes in place of the repeating texture. This is a design judgment, not a fixed rule.

Browser support for SVG favicons varies, so sites commonly provide a raster fallback such as PNG or ICO alongside the SVG. Pattern fills complicate that step. When a pattern-filled SVG is exported to a fallback size, the pattern is flattened into pixels at that resolution. Some design applications and converters may also expand or rasterize patterns on import or export, which changes how editable the result is. Test the exported files rather than assuming the pattern survived intact.

Using a logo as the repeating motif

Building a pattern from a brand mark is technically simple, but being able to download a logo file does not grant permission to modify it, repeat it as a texture, or use its fonts or trademark. Brand guidelines often restrict how a mark may be altered or tiled, so check the owner's terms before turning someone else's logo into a pattern.

Gaps in this overview

No specific evidence was supplied about particular browsers' favicon support, individual design tools' handling of pattern fills, or performance figures. This article therefore describes how the pattern element is specified to behave and offers general practical guidance. It does not give tested results, version-specific compatibility details, or measurements. Check those against current documentation and your own test files.