CONTENTS
ベクター・グラフィック。 XML仕様にて記述される。 拡張子は、テキストデータの .svg と、テキストデータをgzip圧縮した .svgz 。
テキストデータも扱えるが、日本語を記述する場合、文字コードはUTF-8でなければならない。
| XML宣言文 | <?xml version="1.0" encoding="UTF-8" standalone="no"?> |
|---|---|
| SVG宣言文 | <svg xmlns="http://www.w3.org/2000/svg"> |
| データ本体 | |
| SVG終了宣言文 | </svg> |
| em | 表示フォントのMの高さに対する倍率。 |
| ex | 表示フォントのxの高さに対する倍率。 |
| px | ピクセル（1px = 1ドット）。 |
| mm | ミリメートル。 |
| cm | センチメートル。 |
| in | インチ（1in = 2.54cm）。 |
| pt | ポイント（1pt = 1/72 in = 0.3528mm）。 |
| pc | パイカ（1pc = 12pt）。 |
| % | パーセント。 |
<svg><line></line></svg>
開始タグの終了タグの間にタグやテキストがない場合、終了タグを省略表記できる。 上記の場合、<line></line> の部分が省略表記可能であり、<line />と表記する。
<svg><line /></svg>
この場合、<svg>と</svg>の間には<line />があるので省略表記できない。
また、タグが属性を持っていても省略表記は可能である。
<line x1="100" y1="300" x2="300" y2="100" />
各タグには、id属性を付けられる。
<line id="LINE1" /> <line id="LINE2" />
各タグに付けたidは、他のタグから参照可能。
<use xlink:href="#LINE1" mask="url(#LINE2)" />
<mask>タグと共に使う。詳細は<mask>タグ参照。
図形の移動や回転を指定する。
<line transform="translate(900 200) rotate(-30)" />
属性として、様々な宣言を行える（名前空間接頭辞）。
例えば、データ本体に含まれるタグの属性で、リンク先を指定する場合、そのタグの中に「xlink:href」と書かねばならない。SVG宣言文では、このxlinkを宣言しなければいけない。
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
各タグをグループ化する。属性には、グループ内の全てのタグに共通する属性を設定できる。
<g id="Layer1" width="32px" height ="32px"> <image x="00" y="00" xlink:href="test.png" /> <image x="32" y="00" xlink:href="test.png" /> <image x="00" y="32" xlink:href="test.png" /> <image x="32" y="32" xlink:href="test.png" /> </g>
| ※svg対応ソフトに拠って表示（の実装）に差異があるため、共通属性を<g>タグに含めると、想定した表示にならない場合がある様子。 |
各タグをグループ化する。<g>タグとの違いは、マスク画像などの参照専用画像を入れるためのグループであり、グループ内のタグが描画されないこと。
他の画像ファイルを読み込む。
<image x="128" y="64"
width="32px" height ="64px"
xlink:href="test.png" />
左上(x, y)～右下(x+width, y+height)の範囲にxlink:hrefで指定されたリンク先の画像を表示する。使用可能な画像ファイルは JPEGおよびPNG 。
<mask>～</mask>内のタグをマスク画像として扱う。マスク画像の明度を基準とした半透明表示が可能。
<mask id="MASK1">
<image x="64" y="64"
width="32px" height ="32px"
xlink:href="test.png" />
</mask>
マスク画像を使用するには、他の描画系タグにmask属性を指定する。
<image x="16" y="16"
width="128px" height ="128px"
xlink:href="test.png"
mask="url(#MASK1)" />
長方形を描く。
<rect x="0" y="0"
width="48" height="64"
stroke="blue" stroke-width="2"
fill="none" />
左上(x, y)～右下(x+width, y+height)の長方形を、線の色はstroke、線の太さはstroke-width、塗り潰しの色はfillで描く。
rx、ryで角の丸さの指定も可能。
多角形を描く。
<polygon points="100,0 13.4,50 13.4,150
100,200 186.6,150 186.6,50"
stroke="blue" stroke-width="2"
fill="gray" />
