複合パスの定義テクニック

svgのpath要素のd属性には図形を定義するコマンド文字列（パス文字列）を記述しますが，ここにパス定義を連結して記述することで，複数のパスを単一のpath要素で記述することが可能となります．

じゃあこれにひと手間加えるとどうなるか，っていうのがこの投稿のテーマです．
手書き時に威力を発揮しますが，スクリプトを作る時も憶えておくと便利かも．

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg[
 <!ENTITY shape1 "m10,5a5,5 0 1,1 -10,0a5,5 0 1,1 10,0z">
 <!ENTITY shape2 "m0,5l5,-5 5,5 -5,5 -5,-5z">
]>
<svg width="400px" height="400px" 
 viewBox="0 0 40 40" 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <path fill="red" d="
  M0 , 0 &shape1; M10, 0 &shape2; M20, 0 &shape1; M30, 0 &shape2;
  M0 ,10 &shape2; M10,10 &shape1; M20,10 &shape2; M30,10 &shape1;
  M0 ,20 &shape1; M10,20 &shape2; M20,20 &shape1; M30,20 &shape2;
  M0 ,30 &shape2; M10,30 &shape1; M20,30 &shape2; M30,30 &shape1;
 "/>
</svg>

多くは語らない！コードを見て感じるんだ！

HINT

• 単一の図形に相当するパス文字列は全て相対位置指定（小文字のコマンド）で定義する．
  こうすると先頭に絶対位置移動コマンドを追加するだけで図形の位置をずらすことが出来る．
  （Mで移動して，mでスキップ！これがミソ！）
• スクリプトで操作するのなら，SVGPathElementのpathSegListプロパティから「M コマンド部」のみを取り出して動かそう．
  こうすることで複合パスでありながら個別の図形が動いているように見せることが可能．
• 同じ図形を繰り返すのであればDTDでエンティティとして登録してしまおう．
  そうすれば例のように無駄が大幅に省ける．（ブラウザ専用になってしまいますが）