以下のテンプレートを使って，SVGの学習をしていきましょう。
（注）IE8はSVGに対応しておりません。
基本図形
| 図形 | 命令 | 属性 | サンプル文 |
|---|---|---|---|
| 四角形 | rect | x, y（左上の座標） width, height（幅，高さ） stroke（輪郭線の色） fill（塗りつぶしの色） | <rect x="10" y="10" width="90" height="120" stroke="red" fill="blue" /> |
| 円 | circle | cx, cy（中心の座標） r（半径） stroke（輪郭線の色） fill（塗りつぶしの色） | <circle cx="100" cy="100" r="80" stroke="red" fill="blue" /> |
| 楕円 | ellipse | cx, cy（中心の座標） rx（横半径） ry（縦半径） stroke（輪郭線の色） fill（塗りつぶしの色） | <ellipse cx="100" cy="100" rx="80" ry="60" stroke="red" fill="blue" /> |
| 直線 | line | x1, y1（始点の座標） x2, y2（終点の座標） stroke（輪郭線の色） | <line x1="10" y1="10" x2="90" y2="90" stroke="red" /> |
| 折れ線 | polyline | points（座標の並び） stroke（輪郭線の色） | <polyline points="10, 10, 100, 100, 10, 100" stroke="red" fill="blue" /> |
| 多角形 | polygon | points（座標の並び） stroke（輪郭線の色） | <polygon points="10, 10, 100, 100, 10, 100" stroke="red" fill="blue" /> |
パス
| 図形 | 命令 | 属性 | サンプル文 |
|---|---|---|---|
| パス | path | d（コマンド列） stroke（輪郭線の色） fill（塗りつぶしの色） | <path d="M 100, 100, L 200, 100, 200, 200, 100, 200" stroke="red" fill="blue"/> |
パスのコマンド一覧
| 図形 | コマンド内容 | あとに続く数値の内容 |
|---|---|---|
| M | 移動 | 点座標，点座標，… |
| L | 直線 | 点座標，点座標，… |
| H | 水平線 | x座標 |
| V | 垂直線 | y座標 |
| Q | 二次ベジェ曲線 | 制御点座標，頂点座標，制御点座標，頂点座標，… |
| T | 二次ベジェ曲線 （制御点は自動計算） | 頂点座標，頂点座標，… |
| C | 三次ベジェ曲線 | 制御点１座標，制御点２座標，頂点座標，制御点１座標，制御点２座標，頂点座標，… |
| S | 三次ベジェ曲線 （制御点１は自動計算） | 制御点２座標，頂点座標，制御点２座標，頂点座標，… |
| A | 円弧 | x半径，y半径，回転角，0なら短弧で1なら長い弧, 0なら反時計回りで1なら時計回り, 終点座標 |
| Z | パスを閉じる |
画像
| 図形 | 命令 | 属性 | サンプル文 |
|---|---|---|---|
| 画像 | image | x, y（左上座標） width（幅） height（高さ） xlink:href（画像URL） | <image x="100" y="100" width="450" height="335" xlink:href="sample.jpg" /> |