※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

CONTENTS


SVGをwwwブラウザに表示させる

JavaScript

IE用プラグイン

データ概要

ベクター・グラフィック。 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属性

 各タグには、id属性を付けられる。

<line id="LINE1" />
<line id="LINE2" />

 各タグに付けたidは、他のタグから参照可能。

<use xlink:href="#LINE1" mask="url(#LINE2)" />

mask属性

 <mask>タグと共に使う。詳細は<mask>タグ参照。

transform属性

 図形の移動や回転を指定する。

<line transform="translate(900 200) rotate(-30)" />

SVG宣言文

 属性として、様々な宣言を行える(名前空間接頭辞)。

 例えば、データ本体に含まれるタグの属性で、リンク先を指定する場合、そのタグの中に「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>タグ

 各タグをグループ化する。属性には、グループ内の全てのタグに共通する属性を設定できる。

<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>タグに含めると、想定した表示にならない場合がある様子。

<defs>タグ

 各タグをグループ化する。<g>タグとの違いは、マスク画像などの参照専用画像を入れるためのグループであり、グループ内のタグが描画されないこと。

<image>タグ

 他の画像ファイルを読み込む。

<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>内のタグをマスク画像として扱う。マスク画像の明度を基準とした半透明表示が可能。

<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>タグ

 長方形を描く。

<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>タグ

 多角形を描く。

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

参考サイト