SVG Patterns

Last Updated:

SVG Patterns

The <pattern> SVG element defines a graphics object which can be redrawn at repeated x and y-coordinate intervals ("tiled") to cover an area.

In this example, we will create a chess like pattern by using <pattern> SVG attribute.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg width="100%" height="600"> <pattern id="patt" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse" > <rect x="0" width="75" height="75" y="0"/> <rect x="75" width="75" height="75" y="75"/> </pattern> <rect x="0" y="0" width="100%" height="100%" fill="url(#patt)" /> </svg> </body> </html>

Attributes Value

AttributeExplanation
height Specifies the height of the pattern tile.
href Specifies a template pattern that provides default values for the <pattern> attributes.
patternContentUnits Specifies the coordinate system for the contents of the <pattern>.
patternTransform Specifies the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system.
patternUnits Specifies the coordinate system for attributes x, y, width and height.
preserveAspectRatio Specifies how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.
viewBox Specifies the bound of the SVG viewport for the pattern fragment.
width Specifies the width of the pattern tile.
x Specifies the x coordinate shift of the pattern tile.
y Specifies the y coordinate shift of the pattern tile.

Share this Page

Meet the Author