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>


Global attributes

Specific attributes

DOM Interface

This element implements the SVGPatternElement interface.



<svg width="120" height="120" viewBox="0 0 120 120"

    <pattern id="Triangle" width="10" height="10"
      <polygon points="5,0 10,10 0,10"/>

  <circle cx="60" cy="60" r="50" fill="url(#Triangle)"/>



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 Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Document Tags and Contributors

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