SVG (Scalable Vector Graphics)

エスブイジー

 XMLによって記述されたベクターグラフィック言語。従来インターネットで標準的に使用されてきたグラフィックデータは、JPEG、GIF、PNGなどである。ところが、これらはどれもビットマップ(ラスター)方式であり、ベクター方式の標準がなかった。そこで、XMLを用いて、標準となるベクターグラフィック言語として開発されたのがSVGである。

 以下がAdobe Illutrator 9.0から出力したSVG画像の一例である。

 SVG Sample

 SVGを表示可能なソフトウェアをインストールしている場合は、ここをクリックすることで直接SVGファイルを閲覧することもできる。

 この画像のソースコードは以下の通りである。

<?xml version="1.0" encoding="utf-16"?>
<!-- Generator: Adobe Illustrator 9.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/
svg-20000303-stylable.dtd" [
<!ENTITY st0 "fill:#BF0D0B;stroke-width:5;">
<!ENTITY st1 "fill:#F8E81F;stroke-width:5;">
<!ENTITY st2 "fill:#F7B71B;stroke-width:5;">
<!ENTITY st3 "fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-
miterlimit:4;">
<!ENTITY st4 "fill:#C5E41E;stroke-width:5;"> ]>
<svg width="422.5pt" height="425pt" viewBox="0 0 422.5 425"
xml:space="preserve">
<g id="_x0083__x008C__x0083_C_x0083__x0084__x0081__x005B
__x0020_1" style="&st3;">
<path style="&st0;" d="M122.5,61.25c0,32.447-26.863,
58.75-60,58.75s-60-26.303-60-58.75S29.363,2.5,62.5,
2.5s60,26.303,60,58.75z"/>
<path style="&st2;" d="M170,103.75c0,33.828-27.982,
61.25-62.5,61.25S45,137.578,45,103.75S72.982,42.5,
107.5,42.5S170,69.922,170,103.75z"/>
<path style="&st1;" d="M282.5,190c0,49.706-37.496,
90-83.75,90S115, 239.706,115,190s37.496-90,83.75-90s83.75,
40.294,83.75,90z"/>
<path style="&st4;" d="M420,316.25c0,58.681-50.368,
106.25-112.5,106.25S195,374.931,195,316.25C195,257.57,
245.368,210,307.5,210S420,257.57,420,316.25z"/>
</g>
</svg>

 SVGは、Adobe Illustratorを使いこなしているユーザーであれば、同ソフトで作成した画像データがいともたやすくSVGファイルに変換できることから、HTMLを用いず、SVGでコンテンツを作成する誘惑に駆られるかも知れない。だが、SVGはHTMLのようなページ記述言語ではなく、単なるベクターグラフィック言語である。あくまで、Webページに埋め込む画像データを作成することを目的とした言語である。

 実際にSVGでページ全体を記述しても、レイアウトが固定されてしまうため、1行がウィンドウ幅で折り返さず、小さなウィンドウでテキストを読むと煩雑な横スクロールを要求され、実用的ではない場合が多い。

XML & SOA フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

アイティメディアの提供サービス

TechTargetジャパン

キャリアアップ

- PR -
ソリューションFLASH