Skip to content
Related Articles

Related Articles

Improve Article

SVG <pattern> Element

  • Last Updated : 02 Nov, 2020

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations in HTML canvas. The <pattern> element is used to fill shapes with patterns made up of images. It fills the shapes in a tiled fashion.

Syntax:

<pattern> . . .  </pattern>

Attributes:

  • patternUnits: It defines the co-ordinates of x, y, height and width.
  • patternContentUnits: It defines the region of the pattern.
  • preserveAspectRatio: It shows an element with a viewBox giving a aspect ratio must fit into a viewport with a different aspect ratio.
  • xlink:href: It defines a reference IRI to a resource.

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg width="200" height="200">
        <defs>
            <pattern id="pattern" x="0" y="0"
                width="10" height="10" 
                patternUnits="userSpaceOnUse">
              
                <circle cx="10" cy="10" r="10"
                    style="stroke:lightgreen; 
                        fill:white" />
            </pattern>
        </defs>
  
        <rect x="10" y="10" width="100" 
            height="100" style="stroke: #000000;
                        fill: url(#pattern);" />
  
        <g fill="#FFFFFF" stroke="black" 
            font-size="12" font-family="Verdana">
          
        <text x="13" y="65">
            GeeksForGeeks
        </text>
    </svg>
</body>
  
</html>

Output:



Example 2:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg width="300" height="350">
        <defs>
            <pattern id="in" x="2" y="2" 
                width="6" height="6" 
                patternUnits="userSpaceOnUse">
  
                <rect x="2" y="2" width="4" 
                    height="8" stroke="green" 
                    fill="red" />
            </pattern>
  
            <pattern id="out" x="13" y="13" 
                width="50" height="50" 
                patternUnits="userSpaceOnUse">
  
                <circle cx="4" cy="4" r="18" 
                    stroke="black" 
                    stroke-width="4px" 
                    fill="url(#in)" />
            </pattern>
        </defs>
  
        <rect x="1" y="5" width="200" 
            height="200" stroke="green" 
            fill="url(#out)" />
    </svg>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :