SVG

出典: フリー教科書『ウィキブックス(Wikibooks)』
移動: 案内検索

Scalable Vector Graphics(スケーラブル ベクタ グラフィクス、SVG、エスブイジー)とは、XMLによって記述された2次元ベクタグラフィック言語です。W3Cオープン標準として勧告しています。[1]

<svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="100" height="100" version="1.1">
    <svg:title>Hello, world!</svg:title>
</svg:svg>

目次[編集]

はじめに[編集]

SVGの表現能力はAdobe Flashと重なる部分もありますが、SVGがXMLベースのテキストフォーマットであるのに対し、Flashはバイナリフォーマットであるという違いがあります。また、SVGはW3Cで策定されたオープン標準ですが、FlashはAdobeが開発した独自のフォーマットです。

SVGはXMLで記述されているため、XHTMLMathMLなどの他の標準と組み合わせて使用することができます。DOMによるメソッドを使ってJavaScript (ECMAScript) から操作することも可能です。XPathはSVG画像の特定の要素を指し示すことができます。CSSでスタイルを指定することもできます。

SVG画像はレンダリングエンジンが対応していれば、ウェブブラウザ上で閲覧することができるでしょう。対応していない場合でも、外部のビューワプラグインを導入して見ることができるようになる場合があります。HTMLにWYSIWYGソフトウェアがあるように、SVGにもSVG画像を作成する専用のソフトウェアがありますが、テキストエディタを使って自分で書くこともできます。

説明[編集]

desc要素で表します。

タイトル[編集]

title要素で表します。

グループ化[編集]

g要素で表します。

四角形[編集]

rect要素で表します。

<svg>
    <rect x="1" y="1" width="100" height="100" style="fill: #FFFFFF; stroke: #000000; stroke-width: 5; "/>
</svg>
x
x座標
y
y座標
width
横幅
height
縦幅

[編集]

circle要素で表します。

<svg>
    <circle cx="1" cy="1" r="100" style="fill: #FFFFFF; stroke: #000000; "/>
</svg>
cx
x座標
cy
y座標
r
半径

ポリゴン[編集]

polygon要素で表します。下記の例では(0,100)、(50,0)、(100,100)を結んだ図形を表示します。

<svg>
    <title>正三角形</title>
    <polygon points="0,100 50,0 100,100"/>
</svg>
points
各点の座標

参考文献[編集]

このページ「SVG」は、書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にノートへどうぞ。