SVG Patterns

SVG pattern is used to fill any shape with different types or patterns created by svg shapes or lines. pattern has some attributes such as id, x, y, width, height, patternUnits etc.

Syntax

<pattern id="idName" x="value" y="value" width="width" height="height" patternUnits="value" >
</pattern>

You can use any number of attributes in pattern element

You can use SVG patterns any where within an HTML document.

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <svg> element to draw svg any pattern on webpage
• Give width and height of 300 300 respectivelly to SVG element

save file with name task.html or task.htm and then open it using any browser and see results.

SVG Code Generators

Try our SVG generators to practice and generate SVG code in real time.