<pattern>

The <pattern> element defines a graphics object which can be redrawn at repeated x and y-coordinate intervals ("tiled") to cover an area. The <pattern> is referenced by the fill and/or stroke attributes on other graphics elements to fill or stroke those elements with the referenced pattern.

Usage context

CategoriesContainer element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
Structural elements
Gradient elements
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGPatternElement interface.

Example

SVG

<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="Triangle" width="10" height="10"
        patternUnits="userSpaceOnUse">
      <polygon points="5,0 10,10 0,10"/>
	</pattern>
  </defs>
  <circle cx="60" cy="60" r="50" fill="url(#Triangle)"/>
</svg>

Result

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<pattern>' in that specification.
Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<pattern>' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) ?
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?

Document Tags and Contributors

 Contributors to this page: mattwojo, Sebastianz, Tigt, kscarfone, Jeremie
 Last updated by: mattwojo,