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>
- 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.
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
Supported Browsers: The browsers supported by HTML SVG Pattern are listed below:
- Google Chrome
- Internet Explorer
- HTML | pattern Attribute
- HTML | <input> pattern Attribute
- HTML | DOM Input URL pattern Property
- HTML | DOM Input Search pattern Property
- HTML | DOM Input Password pattern Property
- HTML | DOM Input Text pattern Property
- HTML | DOM Input Email pattern Property
- AngularJS | ng-pattern Directive
- The Factory Pattern in Scala
- How to create singleton design pattern in PHP 5 ?
- How to check a string begins with some given characters/pattern ?
- HTML Course | Structure of an HTML Document
- HTML Course | Basics of HTML
- HTML | DOM HTML Object
- HTML | <td> Tag
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.