Use of SVG pattern to create a PS-like transparency grid

patterngrid

<!-- http://mike.eire.ca/2010/02/25/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>