Skip to content
Related Articles

Related Articles

HTML | SVG pattern
  • Last Updated : 23 Oct, 2019
GeeksforGeeks - Summer Carnival Banner

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.




<!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>

Output:

Example 2:




<!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>

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




<!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>

Output:

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

    full-stack-img

    My Personal Notes arrow_drop_up
Recommended Articles
Page :