Easy SVG grid

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>