A pattern tag can be included in the <defs/> section at the beginning of a SVG. The id attribute specifies a name for the pattern, and a rectangle is specified by the attributes x, y, width and height. (See also the description of rectangles.)
Contained in the pattern are other drawing tags which construct the pattern. The contents drawn into the rectangle are used to tile a region which can be filled by the pattern.
Examples of the use of patterns are given below. You can do a lot more with patterns. If you are curious what else can be done, consult the references below.
This example fills the whole image with a grid:
01: <svg version="1.1" baseProfile="full" 02: xmlns="http://www.w3.org/2000/svg" 03: width="800px" height="200px" viewBox="0 0 800 200"> 04: 05: <defs> 06: <pattern id="GridPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse"> 07: <line x1="0" y1="0" x2="10" y2="0" stroke="lightblue" stroke-width="1px" /> 08: <line x1="0" y1="0" x2="0" y2="10" stroke="lightblue" stroke-width="1px" /> 09: </pattern> 10: </defs> 11: 12: <rect fill="url(#GridPattern)" x="0" y="0" width="800" height="200"/> 13: 14: </svg> 15:
The code is ordered so that the shapes on the left side of the figure appear first.
You can use patterns to fill any shape:
01: <svg version="1.1" baseProfile="full" 02: xmlns="http://www.w3.org/2000/svg" 03: width="300px" height="300px" viewBox="0 0 300 300"> 04: 05: <defs> 06: <pattern id="PinkPattern" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"> 07: <rect x="0" y="0" width="25" height="25" fill="pink"/> 08: <circle cx="0" cy="0" r="20" fill="white"/> 09: </pattern> 10: </defs> 11: 12: <circle cx="150" cy="150" r="145" stroke="purple" stroke-width="5px" fill="url(#PinkPattern)"/> 13: 14: </svg> 15:
