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で記述されているため、XHTMLやMathMLなどの他の標準と組み合わせて使用することができます。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
- 各点の座標
