I needed a grid in the background while I was debugging an SVG image I was creating, something like Photoshop’s transparency grid. Here’s what I did.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="400"> <defs> <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"> <rect fill="black" x="0" y="0" width="10" height="10" opacity="0.1"/> <rect fill="white" x="10" y="0" width="10" height="10"/> <rect fill="black" x="10" y="10" width="10" height="10" opacity="0.1"/> <rect fill="white" x="0" y="10" width="10" height="10"/> </pattern> </defs> <rect fill="url(#grid)" x="0" y="0" width="100%" height="100%"/> </svg> |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="400"> <defs> <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"> <rect fill="black" x="0" y="0" width="10" height="10" opacity="0.1"/> <rect fill="white" x="10" y="0" width="10" height="10"/> <rect fill="black" x="10" y="10" width="10" height="10" opacity="0.1"/> <rect fill="white" x="0" y="10" width="10" height="10"/> </pattern> </defs> <rect fill="url(#grid)" x="0" y="0" width="100%" height="100%"/> </svg>