Open In App

SVG pattern Element

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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. 

html




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

html




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

html




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


Last Updated : 06 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads