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: