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.
- Difference between background and background-color
- Django URL patterns | Python
- Asynchronous Patterns in Node.js
- Difference between MVC and MVT design patterns
- PHP str_pad to print string patterns
- Principles and Patterns of User Interface Design
- Function to escape regex patterns before applied in PHP
- CSS | Background
- CSS | Hue Background
- How to set the SVG background color ?
- p5.js | background() function
- How to use text as background using CSS ?
- How to set multiple background images using CSS?
- CSS | background-color Property
- Set the size of background image using CSS ?
- CSS | background-attachment Property
- CSS | background-origin property
- CSS | background-repeat Property
- CSS | background-image Property
- CSS | background-size Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. 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.