SVG (Scalable Vector Graphics)

SVG (Scalable Vector Graphics)

XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。

ベクター画像は画像を点の集合体ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。

また、SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。

SVGファイルはベクター画像の記録用として単独で利用されるほか、他のXML文書に埋め込んで使用することができる。

SVGではその中でも特にXHTMLで記述されたWebページに埋め込まれることを強く意識しており、XMLベースの数式記述言語であるMathMLと合わせて、「XHTML+MathML+SVG」という仕様もドラフトが公開されている。

SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、XHTMLとの連携を意識して、Webブラウザでも対応が進むものと考えられている。また、Adobe社からはSVG閲覧用のプラグインも提供されている。

ちなみに、SVGはXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。このため、テキストエディタでSVGファイルを作成して画像を表現することも一応可能になっている。

SVGとは 【Scalable Vector Graphics】 - 意味/解説/説明/定義 : IT用語辞典

要素 (element)

基本図形 (Basic shapes)

要素 説明
circle  
ellipse  
line  
polygon  
polyline  
rect  

属性 (Attributes)

表示方法

<object type="image/svg+xml" data="sample.svg"></object>
<img src="sample.svg" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="0" y="0" width="200" height="100" fill="gray" />
    <circle cx="30" cy="30" r="20" fill="white" />
</svg>
要素 表示例
object
img
svg