XML/SVG/pattern
Generating a Checkerboard Grid
<source lang="xml">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="800" height="500">
<defs> <pattern id="checkerPattern" width="80" height="80" patternUnits="userSpaceOnUse"> <rect fill="red" x="0" y="0" width="40" height="40" /> <rect fill="blue" x="40" y="0" width="40" height="40" />
</pattern> </defs> <g transform="translate(50,50)"> <rect fill="url(#checkerPattern)" style="stroke:white" x="0" y="0" width="400" height="400" /> </g>
</svg>
</source>
Generating a Gradient Checkerboard
<source lang="xml">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="800" height="400">
<defs> <linearGradient id="gradientDefinition" x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse"> <stop offset="0%" style="stop-color:#FF0000"/> <stop offset="100%" style="stop-color:#000000"/> </linearGradient> <pattern id="checkerPattern" width="40" height="40" patternUnits="userSpaceOnUse"> <rect fill="url(#gradientDefinition)" stroke="yellow" stroke-dasharray="4 4 4 4" x="0" y="0" width="40" height="40"/> </pattern> </defs> <rect fill="url(#checkerPattern)" style="stroke:red" x="0" y="0" width="800" height="400"/>
</svg>
</source>
Using an SVG pattern Element
<source lang="xml">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="100%" height="100%">
<defs> <pattern id="gridPattern" width="40" height="40" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="40" height="40" fill="#CCCCCC" style="stroke:white;stroke-width:3;" /> </pattern> </defs> <g transform="translate(20,20)"> <rect fill="url(#gridPattern)" stroke="red" stroke-width="4" stroke-dasharray="2 2 2 2" x="0" y="0" width="400" height="280" /> </g>
</svg>
</source>