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" />