We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes Yes Yes3
patternUnits ? ? ? ? ?3
patternContentUnits ? ? ? ? ?3
patternTransform ? ? ? ? ?3
x Yes Yes Yes Yes Yes3
y Yes Yes Yes Yes Yes3
height Yes Yes Yes Yes Yes3
width Yes Yes Yes Yes Yes3
href ? ? ? ? ? ?
xlink:href Yes Yes Yes Yes Yes3
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes3 ?
patternUnits ? ? ? ? ?3 ?
patternContentUnits ? ? ? ? ?3 ?
patternTransform ? ? ? ? ?3 ?
x Yes Yes Yes Yes Yes3 ?
y Yes Yes Yes Yes Yes3 ?
height Yes Yes Yes Yes Yes3 ?
width Yes Yes Yes Yes Yes3 ?
href ? ? ? ? ? ? ?
xlink:href Yes Yes Yes Yes Yes3 ?

Document Tags and Contributors

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