How to use SVG Patterns as the background ?
The SVG Pattern element in HTML is used for drawing the different graphical designs or patterns. The patterns represent a graphical object which is used to redraw the same object repeatedly at x and y co-ordinate intervals to cover an area.
Advantages of using SVG Patterns as background:
- It is easy to implement in code and easy to maintain.
- They are lightweight, easy to use, specially for beginners.
- They are scalable.
- They are customisable using CSS for creating a dynamic web page.
- The patterns can be generated from basic graphical objects like rectangles, circles, polygons to complex shapes. It is therefore becoming more popular to the developers.
Resources for SVG Patterns Tools: There are many tools or resources from which one can generate different patterns and use them in code. These are easy to use and can be useful for making creative backgrounds as desired.
Some important attributes of the pattern tag are given below:
<pattern id=”id-defined-by-user” x=”x-axis co-ordinate” y=”y-axis co-ordinate” width=”width-of-pattern” height=”height-of-pattern” patternUnits=”units to define x,y, width and height attributes” xlink:href=”link to another pattern” preserveAspectRatio=”preserving aspect ratio of original content” >
Example 1: In this example, the pattern is repeated to create the whole background. Within the pattern tag, an id is assigned that can be referred to as the pattern id. It can be useful as this pattern could be easily used later on in code by referring to this id.
Example 2: In this example, the pattern is created using a path, which is specified using its ‘id’ attribute. The height, width, fill-color, background color and other parameters are set after defining the pattern.