SVGについて

SVG

SVG（Scalable Vector Graphics）はグラフィックデータの記録方式のひとつで、2次元のグラフィックを記述するための言語です。ベクター・グラフィック形式なので、画像の拡大による画像の劣化がないことが特徴です。現在のWebブラウザのほとんどはSVGのレンダリングをサポートしています。

XML

SVGはW3C勧告（World Wide Web Consortium）により標準化されたマークアップ言語であるXML言語をベースとしています。大抵のグラフィックアプリケーションのデータフォーマットはバイナリ形式で保存されることがほとんどですが、SVGはXMLで記述するテキストになります。

XMLは、テキストデータの構造単位を表す「要素」と、その要素の付帯情報である「属性」を、「タグ」と呼ばれる書式を使って記述します。タグは、テキストデータ構造の開始と終了を<...>の書式で閉じるように記します。ひとつの要素は、タグを使って次のように書くことができます。

<要素名> テキストデータ</要素名>
<要素名属性名="属性情報" 属性名="属性情報" ... > テキストデータ</要素名>

閉じる側のタグは、要素名の前にスラッシュ「/」をつけます。属性を何も指定しない場合の開始のタグは、<要素名>のように属性を省略できます。要素が持つ機能や性質は、その内部のテキストデータに適用されます。テキストデータにはさらに要素を入れることができるので、XML文書は要素のツリー（入れ子）構造になります。テキストデータを内包しないタグは、開始と終了を同時にひとつタグで記述できます。

<要素名/>
<要素名属性名="属性情報" 属性名="属性情報" .../>

タグの要素名や属性の間は空白を挟むか、あるいは改行してもかまいません。

XMLは、メモや注意書きなどような、意味のある内容として解釈されない「コメント」を書くことができます。

SVGの書き方

SVGは、要素名にグラフィックの機能を指定し、属性にて機能の付帯情報を指定し、そして要素を階層的に構成することで、グラフィックの構造を表します。
SVGグラフィック全体を<svg>～</svg>の要素の中に記します。たとえば円を描くグラフィックならば<circle>という要素で記述します。先頭はXML宣言とDOCTYPE宣言で開始します。SVG要素のxmlns属性には、

http://www.w3.org/2000/svg

を指定します。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100 "height="100"
    xmlns="http://www.w3.org/2000/svg">
    <title>タイトル</title>
    <desc>まる</desc>
    <circle cx="50" cy="50" r="25" stroke="yellow"/>
</svg>

このXMLを、拡張子「.svg」のテキストファイルに保存し、Webブラウザで開くと、次のような円の図形が表示されるはずです。