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行がウィンドウ幅で折り返さず、小さなウィンドウでテキストを読むと煩雑な横スクロールを要求され、実用的ではない場合が多い。

リンク

■Scalable Vector Graphics (SVG) 1.0 Specification W3C Candidate Recommendation 2 August 2000

XML & SOA フォーラム新着記事

QAフレームワーク：仕様ガイドラインが勧告に昇格 （2005/10/21）
　データベースの急速なXML対応に後押しされてか、9月に入って「XQuery」や「XPath」に関係したドラフトが一気に11本も更新された
XML勧告を記述するXMLspecとは何か （2005/10/12）
　「XML 1.0勧告」はXMLspec DTDで記述され、XSLTによって生成されている。これはXMLが本当に役立っている具体的な証である
文字符号化方式にまつわるジレンマ （2005/9/13）
　文字符号化方式（UTF-8、シフトJISなど）を自動検出するには、ニワトリと卵の関係にあるジレンマを解消する仕組みが必要となる
XMLキー管理仕様（XKMS 2.0）が勧告に昇格 （2005/8/16）
　セキュリティ関連のXML仕様に進展あり。また、日本発の新しいXMLソフトウェアアーキテクチャ「xfy technology」の詳細も紹介する

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

SVG (Scalable Vector Graphics)

エスブイジー

関連記事

関連用語

リンク

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

キャリアアップ