2008.06.20

Yamaguchi Lab.

Hiroyuki KAMATA

ラスターイメージとベクターイメージ

ラスターイメージ
⇒ 点画 (JPEG，GIF，PNG)
ベクターイメージ
⇒ 線画 (SVG，EPS)

	１倍	２倍
GIF
SVG

SVG とは

SVG (Scaleable Vector Graphic)

2次元グラフィック (テキストや図形) をXML形式で記述する為の規格
ベクターイメージとして描画

例

HTML ソース

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg xml:space="default" width="200" height="120">
  <text x="30" y="60" font-size="26pt">
    SVG Document
  </text>
</svg>

ブラウザ表示

SVG の歴史

SVG が公開される以前

⇒ 2つのベクターイメージを描画する XML 言語が存在

VML (Vector Markup Language)

⇒ マクロメディア，マイクロソフト，HP

PGML (Precision Graphics Markup Language)

⇒ サン・マイクロシステムズ，アドビシステムズ，IBM，ネットスケープ

2001年9月にW3C勧告として公開

SVG の利用

SVG の利用方法は２種類

① 直接 HTML 文書内にXML 文書として記述する方法

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://example.org" xmlns:svg="http://www.w3c.org/2000/svg">
<svg>
  SVGの記述
</svg>

※ 名前空間を利用している

※ この方法は，あまりサポートされてない

② SVG ファイルをタグを用いて挿入する方法

SVG　ファイルの作成
HTML　文書への挿入

1.SVG　ファイルの作成方法

XML　文書記述による描画
ドローソフトによる描画 (Adobe 社の Illustrator，Inkscape 等)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20050606 Stylable//EN" 
           "http://www.w3.org/TR/2005/06/REC-SVG-20060606/DTD/svg10.dld">
<svg>
  SVGの記述
</svg>

2.HTML 文書への挿入

objectタグ : <object　data = "ファイルURL"></object>
embedタグ : <embed src = "ファイルURL">

※ embed タグは　HTML　規約には取り入れられず，object タグが推奨されている

ブラウザ上での表示

ブラウザによっては，SVG に対応していないものも存在

Internet Explorer プラグインが必要 (Adobe SVG Viewer) Mozilla Firefox デフォルトで対応 (表示できない場合もある) Opera デフォルトで対応

画像の表示領域

SVG は，表示領域 (SVG viewport) 内でレンダリングされる

SVG viewport の指定

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20050606 Stylable//EN" 
           "http://www.w3.org/TR/2005/06/REC-SVG-20060606/DTD/svg10.dld">
<svg width="10cm" height="10cm">
</svg>

※ 単位は cm，mm，px，pc (パイカ)，pt が利用可能 (デフォルトでは px)

IE での表示

XML 文書による基本的な描画

XML 文書では，図形とテキストの描画が可能

基本的な図形，テキストの描画

line (線) ⇒ 2点の座標を指定し，その間に直線を描画

<line x1="始点のx座標" y1="始点のy座標" x2="終点のx座標" y2="終点のy座標"/>

rect　(矩形) ⇒ 左上の頂点の座標と矩形の横幅 (x軸方向)，高さ (y軸方向) を指定し，矩形を描画

<rect x="x座標" y="y座標" width="幅" height="高さ" rx="頂点の半径"ry="頂点の半径"/>

circle (円) ⇒ 中心点と半径を指定し，円を描画

<circle cx="円の中心点のx座標" cy="円の中心点のy座標" r="半径"/>

ellipse (楕円) ⇒ 中心点と縦横それぞれの半径を指定し，楕円を描画

<ellipse cx="中心点のx座標" cy="中心点のy座標" rx="半径(x軸方向)" ry="半径(y軸方向)"/>

polyline (折れ線) ⇒ 点を折れ点 (変曲点) として指定し，折れ線を描画

<polyline points="x座標 (折れ点1),y座標 (折れ点1) x座標 (折れ点2),y座標　(折れ点2)・・・"/>

polygon (多角形) ⇒ 点を多角形の頂点として指定し，多角形を描画

<polylgon points="x座標 (頂点1),y座標 (頂点1) x座標 (頂点2),y座標　(頂点2)・・・"/>

テキスト ⇒ 属性として，フォントタイプ，フォントサイズを指定可能

<text x="x座標" y="y座標" font-family="フォントタイプ" font-size="フォントサイズ" />

リンク機能

a タグを用いることで SVG 文書にリンクを設定することが可能

<a xlink:href="リンク先の URI"></a>

リンクの例

複雑な図形の描画

path タグを用いることで直線，曲線を描き，複雑な図形の描画が可能

<path d="パスデータ" fill="塗りつぶしの色" stroke="外周線の色" stroke-width="外周線の太さ"/>

パスデータ

パスデータ	説明
m x座標 y座標	(x,y) へ移動する．線は引かない．
z	現在の点から開始点まで線を引く．
l x座標 y座標	現在の点から指定された座標まで直線を引く．
h x座標 y座標	現在の点から指定された座標まで水平線を引く．
v x座標 y座標	現在の点から指定された座標まで垂直線を引く．
c x1 y1 x2 y2 x y	現在点から指定された座標 (x,y) まで3次ベジェ曲線を引く．(x1,y1) は曲線の開始点の制御点で，(x2,y2) は曲線の終点の制御点を示す．
S x1 y1 x y	現在点から指定された座標 (x,y) まで3次ベジェ曲線を引く．開始点の制御点は，直前に引かれた曲線の終点を指し，(x1,y1) は終点の制御点を示す．
q x1 y1 x y	現在点から指定された座標 (x,y) まで2次ベジェ曲線を引く．(x1,y1) は，開始点と終点の制御点を指す．
t x y	現在点から指定された座標 (x,y) まで2次ベジェ曲線を引く．
a rx ry x-axis-rotation large-arc-flag sweep-flag x y	現在の点から指定された座標 (x,y) まで楕円形の曲線を引く．楕円は2つの半径 (rx,ry) と軸の回転 (x-axis-rotation) によって定義される．large-arc-flag と sweep-flag は楕円の描き方を指す．

path タグを用いた例

XML ソース

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
    "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="600" height="350">
  <path d="m 50,50 a 30,30,0,1,1,150,200" fill="none" stroke="red" stroke-width="5"/>
  <text x="50" y="300" stroke="black" font-size="20px">パスデータ a による楕円</text>
  <path d="M 280,30 C 400,160 200,40 400,250" fill="none" stroke="pink" stroke-width="5"/>
  <text x="300" y="300" stroke="black" font-size="20px">パスデータ c による3次ベジェ曲線</text>
</svg>

ブラウザ出力

図形に対する操作

グループ化

g タグを用いることでグループ化を行い，共通の属性を持たせることが可能

<svg><g グループ化した図形に持たせる属性>図形等の描画</g></svg>

アフィン変換

translate 属性を用いて，アフィン変換 (ベクトル空間における線形写像)　が可能

主な変換

コマンド	説明
matrix(a,b,c,d,e,f)	アフィン変換行列を指定して変換
translate(x,y)	平行移動
scale(x,y)	拡大，縮小
rotate(角度)	回転

使用例 (scale() を用いて図形を２倍に拡大)

<svg><g transform="scale(2.0,2.0)">図形等の描画</g></svg>

シンボル機能

defs タグと symbol タグを用いて，オブジェクトの定義が可能

defs タグ　:　SVG 要素を格納
symbol タグ :　グラフィックオブジェクトを定義

シンボル機能を用いた例

XML ソース (XML 宣言と DTD 参照は省略)

<svg width="500" height="200">
  <defs>
    <symbol id="cone" viewBox="0 0 160 160">
      <g>
        <path d="M 50,50 L 90,30 90,70 Z" />
        <ellipse cx="90" cy="50" rx="8" ry="20"/>
      </g>
    </symbol>
  </defs>
        <use xlink:href="#cone" x="-50" y="50" fill="red" />
        <use xlink:href="#cone" x="-50" y="30" fill="pink" transform="scale(0.6,0.6)"/>
</svg>

ブラウザ出力

グラデーション機能

linearGradient (線形) タグと，radialGradient (放射状) タグでグラデーション効果が出せる．

linearGradient タグを用いた例

XML ソース (XML 宣言と DTD 参照は省略)

<svg width="220" height="200">
  <defs>
    <linearGradient id="LG" gradientUnit="objectBoundingBox"
      x1="0" y1="0" x2="1" y2="1" spreadMethod="repeat">
      <stop stop-color="red" offset="0" />
      <stop stop-color="pink" offset="0.5" /> 
    </linearGradient>
  </defs>
  <rect x="20" y="20" width="180" height="140" fill="url(#LG)" />
</svg>

ブラウザ出力

※ グラデーション効果の利用法 : defs でグラデーション効果を要素として格納し，後に fill 等で呼び出すのが一般的

フィルター機能

照明効果やぼかしなどを加えるフィルター機能を与えるタグが多数存在

主なフィルター機能

タグ	説明
feDistantLight	遠い距離にある光源による照明効果を加える
fePointLight	局所的な照明効果を加える
feSpotLight	スポットライトによる照明効果を加える
feGaussianBlur	ガウスぼかしフィルター

フィルター機能は，SVG1.0の仕様に従いつつ，SVG を拡張した形になっている．
今後の SVG　の機能として用いられると期待される．

スタイルシート機能

スタイルに関する属性 : fill,stroke,font-family ⇒ プレゼンテーション属性

これらのプレゼンテーション属性は，CSS2 スタイルシートとして記述可能

外部のスタイルシートに記述
SVG 文書内にスタイル・プロパティを記述
style 属性として記述

外部のスタイルシートに記述する方法


style {
    fill: red;
    stroke: blue;
    stroke-width:5;
}




]]>

SVG 文書内にスタイル・プロパティを記述する方法

]]>

style 属性として記述する方法

]]>

アニメーション機能

animate タグを用いることで，アニメーション (属性値の変更) を実現可能

主なanimate 要素

要素	説明
animate	指定した描画要素の属性を変化させる
animateMotion	指定した描画要素をパスに合わせて動かす
animateColor	色を変化させる

主なanimate の属性

属性	説明
attributeType	変更する属性のタイプを指定する
attributeName	指定した描画要素をパスに合わせて動かす
from	変化させたい属性のアニメーションの開始時の値を示す
to	変化させたい属性値のアニメーションの終了時の値を示す
begin	アニメーションの開始時を示す
dur	アニメーションの期間を示す
by	アニメーションがオフセットされる時間を示す
fill	アニメーション終了時の設定を指定する
values	複数の値をセミコロンで区切って入れる
repeatCount	アニメーションを反復させる回数を指定する
repeatDur	アニメーションを反復させる期間を指定する

XML　ソース

]]>

アニメーションの例

※　アニメーションは，SVG　の仕様書ではなく，SMIL の仕様書に記述されている．

Javascriptアニメーション

JavascriptでDOM　を使って属性を変化させ，アニメーションを作成可能

DOM (Document Object Model)
⇒ XML　の要素を木構造のノードと考えたとき，それらに直接アクセスし，属性などを変化させる．

javascript，DOMを利用した例

まとめ

SVG　はベクターイメージの画像を取り扱い，拡大，縮小に強く，容量も小さい
XML 文書によって記述される為，ドローソフトが無くても編集可能
ブラウザによってサポートの度合いが異なる
図形，テキストの描画が可能でそれらにリンクやアニメーション等様々な効果を添付可能

SVG の今後

ブラウザ，又はプラグインによるサポートが普及の鍵
Opera や Firefox は SVG に積極的
モバイル携帯などでの活躍が見込まれる

REFERENCE

SVG 入門 , http://www.asahi-net.or.jp/~uf4k-nkjm/SVG/index.html#index
TECHSCORE , http://www.techscore.com/index.html
SVG 学習辞典 , http://dhr.at.infoseek.co.jp/svgindex.htm
XML SQUARE , http://www.utj.co.jp/xml/

Contents

ラスターイメージとベクターイメージ

SVG とは

SVG の歴史

SVG の利用

ブラウザ上での表示

画像の表示領域

XML 文書による基本的な描画

リンク機能

複雑な図形の描画

図形に対する操作

スタイルシート機能

アニメーション機能

Javascriptアニメーション

まとめ

REFERENCE