ここではSVGの基本要素について学習できるように準備しました。実際に 1つのSVGファイル作成を通じて、各要素を覚えてもらいたいと考えています。 Webページ作成の際には、「ステップアップXML活用法」（田中成典監修、工学社） のSVGのページを参考にしました。
このページでは下記のSVGファイルのサンプルを作ってもらいます。 SVGはテキストファイルですので、下記の図もファイル容量が極めて小さくて済 みます。また、SVGファイルをWebブラウザで表示させるには、 SVG Viewerというプラグインを インストールする必要があります。情報大の教育用端末、および学内販売 ノートPCには全てインストール済です。
sample1.svgの表示
上記のSVGファイルのソースを閲覧するには、上記のSVGの図の上で、 右クリックした後に「ソースを表示」という項目を選択してください。 演習では最終的に完成させますが、理解し、覚えるために、 段階を経て作成してください。
この演習で作成するSVGファイルの名前をsample1.svg、 SVGファイルを貼り付けるHTMLファイルをsample1.html とします。以下に、HTMLファイルのソースを示しますので、 大した文量ではないですから、自分自身で入力してください。 このHTMLファイルは、EUC-JPかShift_JIS（または自動選択でも可）で 保存しましょう。
sample1.html
<html> <body> <p> sample1.svgの表示 </p> <embed src="sample1.svg" name="sample1.svg" width="300" height="300" type="image/svg-xml" pluginstage="http://www.adobe.com/svg/viewer/install/" /> </body> </html>
日本語を使用する場合にUnicodeでの保存が要求 されますので、それを実現する秀丸での作業を前提とします。 秀丸での保存では、文字コードの選択では「Unicode」を指定します。 またSVGファイルにおけるencodingの記述は、 ここではutf-8としてください。
また下記の例では、SVGの描画領域を横方向(width)に300ピクセル、縦方向(height)に 300ピクセル確保しています。線や矩形などの図形を記述する際に2次元座標値を 用いて表現しますが、その際には左上隅を原点として、 横方向をx軸、 縦方向をy軸とみなします。覚えておきましょう。
sample1.svg
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/2000/svg10-20000303-stylable" > <svg xml:space="preserve" width="300" height="300"> </svg>
線、曲線を表現するには、いくつかの要素が用意されています。
| 属性名 | 説明 | 必須 |
|---|---|---|
| x1 | 始点のx座標 | 必須 |
| y1 | 始点のy座標 | 必須 |
| x2 | 終点のx座標 | 必須 |
| y2 | 終点のy座標 | 必須 |
使用例：(60,30), (60,250)の2点を直線で結ぶline
| 属性名 | 説明 | 必須 |
|---|---|---|
| points | 連続点の座標 | 必須 |
使用例：(60,30), (60,250), (100,250)の3点を直線で結ぶpolyline
| 属性名 | 説明 | 必須 |
|---|---|---|
| d | 連続点の座標（始点、終点、直線や曲線などの情報も記述） | 必須 |
d属性の中の記述では、「pathLengthコマンド」「x座標」「y座標」の順に記述 します。「pathLengthコマンド」を用いて、与えた点が始点なのか終点なのか、 また点と点の接続は直線なのか曲線なのかなどの情報を与えます。 polyline要素が直線での記述しかできないのに対して、このpath要素は 様々な図形を表現できますので、よく使われます。
「pathLengthコマンド」の一例を下記に紹介します。
| コマンド | パラメータ | 説明 |
|---|---|---|
| M | x, y | 始点 |
| z | なし | パスデータを閉じてポリゴンにする（なくても可） |
| L | x, y | 直線で結ぶ |
| H | x | 水平線を表示 |
| V | y | 鉛直線を表示 |
| C | x1, y1, x2, y2, x, y | 2つの制御点(x1, y1), (x2, y2)を利用して(x, y)まで3Dベジエ曲線を表示 |
| S | x1, y1, x, y | 制御点(x1, y1)を利用して(x, y)まで3Dベジエ曲線を表示 |
| Q | x1, y1, x, y | 制御点(x1, y1)を利用して(x, y)まで3Dスプライン曲線を表示 |
| T | x, y | (x, y)まで2Dスプライン曲線を表示 |
それでは、下記の「追加する記述」を、sample1.svgの中に 記述していきましょう。記述し終えたら、Webブラウザ上で sample1.htmlを閲覧して、line要素とpath要素が 正しく表示されているか確認しましょう。
追加する記述1
追加する記述2
| 属性名 | 説明 | 必須 |
|---|---|---|
| x | 始点のx座標 | 必須 |
| y | 始点のy座標 | 必須 |
| width | 幅 | 必須 |
| height | 高さ | 必須 |
| rx | 角のx方向の丸み | - |
| ry | 角のy方向の丸み | - |
使用例
| 属性名 | 説明 | 必須 |
|---|---|---|
| points | 連続点のx座標 | 必須 |
使用例
追加する記述
円は中心の座標と半径が、楕円は中心の半径とx方向の半径、y方向の半径が与えられ れば表現できます。
| 属性名 | 説明 | 必須 |
|---|---|---|
| cx | 中心点のx座標 | 必須 |
| cy | 中心点のy座標 | 必須 |
| r | 半径 | 必須 |
使用例
| 属性名 | 説明 | 必須 |
|---|---|---|
| cx | 中心点のx座標 | 必須 |
| cy | 中心点のy座標 | 必須 |
| rx | x方向の半径 | 必須 |
| ry | y方向の半径 | 必須 |
使用例
追加する記述1
追加する記述2
追加する記述3
アニメーション要素の説明は長くなるので割愛します。
追加する記述1：上記の「円」の記述に、赤字部分を追加
追加する記述2
追加する記述3
単に文字列を表示させるには、text要素で囲めば十分です。ただし、日本語を 使用する場合には、Unicodeで保存するのを忘れないようにしましょう。
textPathを使うと、特定のpath要素に沿って文字列を表示させることができます。
| 属性名 | 説明 | 必須 |
|---|---|---|
| xlink:href | 参照するpath要素のURL | 必須 |
| starOffset | pathにおけるテキスト表示の開始位置 | - |
使用例
追加する記述1
追加する記述2
追加する記述3
図形の変形と書きましたが、各要素にtransform属性を 与えることで、回転、拡大、移動などを実現できます。
| 属性名 | パラメータ | 説明 |
|---|---|---|
| translate | x, y | x方向にx, y方向にyだけ移動 |
| scale | x, y（倍率） | x方向にx, y方向にyだけ拡大・縮小 |
| rotate | angle（度） | 時計回りにangleだけ回転 |
下記の記述では、g要素を使って、複数の図形要素をまとめ て、一括して移動、回転を行っています。
追加する記述