Using SVG Patterns as Fills

Define a <pattern>, give it an id, and then use it as a fill on an other SVG element using said id:

<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id="circles-1" patternUnits="userSpaceOnUse" width="10" height="10">
      <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmJyAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjMDAwIi8+Cjwvc3ZnPg=="
        x="0" y="0" width="10" height="10">
      </image>
    </pattern>
  </defs>
</svg>

<svg height="100" width="100" style="float:left" class="pattern-swatch">
  <rect style="fill: url(#circles-1) #fff;" x="0" y="0" height="100" width="100"></rect>
</svg>

Using SVG Patterns as Fills →