「Tips - SVGフォーマット」の編集履歴（バックアップ）一覧はこちら

「Tips - SVGフォーマット」(2007/10/11 (木) 17:23:06) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

&font(b,144%){CONTENTS}
#contents

----
**SVGをwwwブラウザに表示させる
***JavaScript
-[[SIE - プラグインなしでIEにSVGを表示する方法>http://dhr.at.infoseek.co.jp/vml.html]]

***IE用プラグイン
-[[Adobe SVG Viewer>http://www.adobe.com/jp/svg/viewer/install/]]
-[[SVG Map Toolkit>http://blog.svg-map.com/2007/09/svgmaptoolkit.html]]

**データ概要
ベクター・グラフィック。
XML仕様にて記述される。
拡張子は、テキストデータの .svg と、テキストデータをgzip圧縮した .svgz 。

テキストデータも扱えるが、日本語を記述する場合、文字コードはUTF-8でなければならない。

**データ構造
|BGCOLOR(#ffc0c0):|BGCOLOR(#f0f8ff):|c
|~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)" />

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

***<image>タグ
他の画像ファイルを読み込む。
|>|~属性|~解説|
|~x|~y|画像ファイルの表示位置（左上座標）。|
|~width|~height|画像ファイルの表示大きさ。|
|>|~xlink:href|読み込む画像ファイル。jpegおよびpng。|
 <image x="128" y="64"
        width="32px" height ="64px"
        xlink:href="test.png" />

左上(x, y)～右下(x+width, y+height)の範囲に画像を表示。

***<mask>タグ
<mask>～</mask>内のタグをマスク画像として扱う。マスク画像の明度を基準とした半透明表示が可能。
 <mask id="MASK1">
   <image x="64" y="64"
          width="32px" height ="32px"
          xlink:href="test.png" />
 </mask>

マスク画像を使用するには、他の描画系タグにmask属性を指定する。
|>|~属性|~解説|
|>|~mask|省略可。指定されたidを持つ<mask>タグをマスク画像と見なす。|
 <image x="16" y="16"
        width="128px" height ="128px"
        xlink:href="test.png"
        mask="url(#MASK1)" />

***<rect>タグ
***<polygon>タグ

**参考サイト
-[[Scalable Vector Graphics (SVG) 1.1 仕様 日本語訳>http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/]]
-[[名前空間の速修講座>http://developer.mozilla.org/ja/docs/SVG:Namespaces_Crash_Course]]

&font(b,144%){CONTENTS}
#contents

----
**SVGをwwwブラウザに表示させる
***JavaScript
-[[SIE - プラグインなしでIEにSVGを表示する方法>http://dhr.at.infoseek.co.jp/vml.html]]

***IE用プラグイン
-[[Adobe SVG Viewer>http://www.adobe.com/jp/svg/viewer/install/]]
-[[SVG Map Toolkit>http://blog.svg-map.com/2007/09/svgmaptoolkit.html]]

**データ概要
ベクター・グラフィック。
XML仕様にて記述される。
拡張子は、テキストデータの .svg と、テキストデータをgzip圧縮した .svgz 。

テキストデータも扱えるが、日本語を記述する場合、文字コードはUTF-8でなければならない。

**データ構造
|BGCOLOR(#ffc0c0):|BGCOLOR(#f0f8ff):|c
|~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で指定されたリンク先の画像を表示する。使用可能な画像ファイルは&font(b){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" />

**参考サイト
-[[Scalable Vector Graphics (SVG) 1.1 仕様 日本語訳>http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/]]
-[[名前空間の速修講座>http://developer.mozilla.org/ja/docs/SVG:Namespaces_Crash_Course]]