VOOZH about

URL: https://www.geeksforgeeks.org/html/svg-pattern-element/

⇱ SVG <pattern> Element - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

SVG <pattern> Element

Last Updated : 31 Mar, 2022
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations in HTML canvas. The <pattern> element is used to fill shapes with patterns made up of images. It fills the shapes in a tiled fashion.

Syntax:

<pattern> . . . </pattern>

Attributes:

  • patternUnits: It defines the co-ordinates of x, y, height and width.
  • patternContentUnits: It defines the region of the pattern.
  • preserveAspectRatio: It shows an element with a viewBox giving a aspect ratio must fit into a viewport with a different aspect ratio.
  • xlink:href: It defines a reference IRI to a resource.

Example 1:

Output:

👁 Image

Example 2:

Output:

👁 Image
Comment
Article Tags: