patternfill_gists

css_pattern_use.html

<div class="circles-1">
</div>

pattern.css

.circles-1 { 
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmJyAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjMDAwIi8+Cjwvc3ZnPg=="); 
  background-repeat: repeat; 
} 

pattern.svg

pattern_def_sample.html

<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_pattern_use.html

<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>