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 →

Responsive Web Design Layout Patterns

Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we’re not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts.

Also comes with a follow-up article that focusses on off-canvas layouts. A fine example of this is Facebook where the navigation is hidden off-screen (off-canvas) until you summon it on-screen.

Multi-Device Layout Patterns →
Off Canvas Multi-Device Layouts →