svgでドットグラデーションパターンを作る

svgであれば次のようなドットグラデーションを作るのも簡単だ．circle要素を繰り返し記述するのは若干面倒だが，構造は至って単純なのでsvgを生成するスクリプトを記述するのも容易であろう．またテキストベースのファイルになるので，色を変更したい場合もスタイル値を変更するだけで良く，わざわざペイントプログラムを起動せずに済む．もちろんここで生成したsvgファイルをHTML要素の背景に指定することは可能だ．

このように単純なパターンを生成するのにsvgは向いている．確かにsvgの要素を理解するのは面倒ではあるが，記述したいパターンをタグのみで簡潔に記述できるのは魅力的だ．

※background-imageプロパティに設定可能なsvgファイルは，内部ツリー構造が静的なものに限られるようだ．従って，javascriptを埋め込んでパターンを生成するようなsvgファイルでは正しい結果を得ることができない．よってsvgを自動生成する際は，別途静的なsvgファイルを生成するような外部プログラム（シェルスクリプトやバッチスクリプトその他）を用いると良い．

例では左から右へのグラデーションだが，パターンを敷き詰めているrect要素にtransform/rotate関数をかけることで，右から左等任意の方向へのグラデーションに変換することが出来る．

<?xml version="1.0" standalone="no"?>
<svg width="125px" height="120px" viewBox="0 0 250 240" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <style type="text/css">
  circle{
   fill:orange;
  }
 </style>
 <defs>
  <g id="even">
   <circle cx="0" cy="10" r="10"/>
   <circle cx="20" cy="10" r="9"/>
   <circle cx="40" cy="10" r="8"/>
   <circle cx="60" cy="10" r="7"/>
   <circle cx="80" cy="10" r="6"/>
   <circle cx="100" cy="10" r="5"/>
   <circle cx="120" cy="10" r="4"/>
   <circle cx="140" cy="10" r="3"/>
   <circle cx="160" cy="10" r="2"/>
   <circle cx="180" cy="10" r="1"/>     
  </g>
  <g id="odd">
   <circle cx="0" cy="10" r="10.5"/>
   <circle cx="20" cy="10" r="9.5"/>
   <circle cx="40" cy="10" r="8.5"/>
   <circle cx="60" cy="10" r="7.5"/>
   <circle cx="80" cy="10" r="6.5"/>
   <circle cx="100" cy="10" r="5.5"/>
   <circle cx="120" cy="10" r="4.5"/>
   <circle cx="140" cy="10" r="3.5"/>
   <circle cx="160" cy="10" r="2.5"/>
   <circle cx="180" cy="10" r="1.5"/>  
   <circle cx="200" cy="10" r="0.5"/>      
  </g>
  <pattern id="dot-grad" x="0" y="0" width="251" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
   <use x="0" y="-10" xlink:href="#even"/>
   <use x="-10" y="0" xlink:href="#odd"/>
   <use x="0" y="10" xlink:href="#even"/>
  </pattern>
 </defs>
 <rect id="left" x="0" y="0" width="250" height="240" fill="url(#dot-grad)"/>
</svg>