HTML | SVG pattern

SVG (Scalable Vector Graphic) pattern is an element which defines the pattern in graphics using HTML. To work with create SVG pattern you have to define a <pattern> inside in an SVG after that, you can define the shapes inside of that <pattern>. Now have to define shapes area by specifying its color, borders, etc.

Syntax of Declaration:

<pattern id=" any name defined by user" 
         x="x-axis co-ordinate" 
         y="y-axis co-ordinate"
         width="length" 
         height="length" 
         viewBox= " "
         view port= " "
         patternUnits=" " 
         patternContentUnits=" " 
         patternTransform=" " 
         preserveAspectRatio=" " 
         xlink:href=" ">
<pattern>

Attributes:



  • x: x-axis co-ordinate of the pattern bounding box. Default is 0
  • y: y-axis co-ordinate of the pattern bounding box. Default is 0.
  • width: Width of the pattern bounding box. Default is 0.
  • height: Height of the pattern bounding box. Default is 0.
  • viewBox: It defines the coordinate system of the pattern box that can zoom the pattern.
  • view port: It gives the image of a particular portion.
  • patternUnits: It defines the coordinates system of x, y, height and width. Default is ObjectBoundingBox.
  • patterncontentUnits: It defines the content inside . Default is userSpaceOnuse.
  • patternTransform: It defines the transformation from initial pattern system to the targeted one.
  • preserveAspectRatio: Scale the deformed or changed graphic due to difference in view box and view port.
  • xlink:href: It links the patterns for reference.

Note: This portion basically has no direct relevance to the main topic. Instead, it introduces you to these concepts as you may encounter them while going through some advanced examples. Since they increase the visual effects of patterns, that’s why they are referred to use.

Below examples illustrates the HTML SVG pattern:

Example 1: Here we will design a logo using SVG pattern.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <center>
  
        <svg height="200" width="400">
            <defs>
                <linearGradient id="grad1"
                                x1="0%" 
                                y1="0%" 
                                x2="100%" 
                                y2="0%">
                    <stop offset="0%" 
                          style="stop-color:white;stop-opacity:1" />
                    <stop offset="100%" 
                          style="stop-color:green;stop-opacity:1" />
                </linearGradient>
            </defs>
            <ellipse cx="200" cy="100" rx="120" 
                     ry="80" fill="url(#grad1)" />
            <text fill="#000000" font-size="22"
                  font-family="ARIAL" x="120" y="110">
              GeeksforGeeks
            </text>
        </svg>
    </center>
</body>
  
</html>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  <head>
    <title>Pattern of SVF</title>
  </head>
  <body>
    <center
      <h1 style="color:green;">GeeksfoGeeks</h1>
    </center>
    <svg width="100%" height="100%">
        <defs
            <pattern id="square"
                     x="0" 
                     y="0" 
                     width="100"
                     height="100" 
                     patternUnits="userSpaceOnUse">
  
                <rect fill="Purple" 
                      width="100" 
                      height="100" 
                      x="50" 
                      y="50">
                </rect>
  
            </pattern>
        </defs>
  
        <rect x="0" y="0" width="100%" 
              height="100%" fill="url(#square)">
              
        </rect>
    </svg>
  </body>
</html>

chevron_right


Output:

Example 3: You can define paths in the SVG define pathe ther are few things about to know path define the movement of the array of lines,orderly,
The following commands are available for path data:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto 
C = curveto 
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<title>SVG Pattern</title>
  
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Sample SVG Pattern</h3>
    <svg width="800" height="800">
  
        <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
                     x="0" y="0" width="100" 
                     height="100" 
                     viewBox="0 0 4 4">
                <path d="M 1 1 L 2 1 L 3 1 L 3 3 L 2 3 L 1 3 Z" 
                      fill="red" 
                      stroke="black" />
            </pattern>
        </defs>
  
        <g>
            <rect x="0" y="0" 
                  width="100%" 
                  height="100%" 
                  fill="url(#pattern1)" />
        </g>
  
    </svg>
  
</body>

chevron_right


Output:

Supported Browsers: The browsers supported by HTML SVG Pattern are listed below: