SVGについて

SVGとは

HTMLで用いられる画像はピクセルを並べる方式のBMPやJPGといったラスタ形式のフォーマットの画像が使われますが、その他にもSVGというフォーマットの画像もよく用いられます。
SVG（Scalable Vector Graphics）はベクター形式の画像で、ピクセルを並べて画像とするラスタ形式とは異なり、座標やそれを繋ぐパスなどの情報を組み合わせて作る画像です。この画像の特徴は拡大しても画像がジャギ―（ギザギザ状の輪郭）が出ずに滑らかなままなことです。そのため解像度に左右されない画像が表示されます。
SVGは基本的に座標などをまとめたテキストデータですが、写真などの複雑な画像では情報量が大きくなりすぎてラスタ形式のファイルと比べて容量が大きくなってしまいます。ロゴやマークといったシンプルな画像に用いるといいでしょう。

SVGの利用

SVGはHTML上で<img>タグを用いて画像ファイルとして表示することができます。
その他にもHTMLに直接記述することもできますがその際には<svg>タグを用います。<svg>タグでSVGを描写する位置と範囲とスタイルを決定します。
SVGの描写情報はXMLで記述します。XML（Extensible Markup Language）はHTMLと同じくマークアップ言語ですが、HTMLはユーザー側に分かりやすく表記する文章であり、XMLはハードウェア側に文章の構造やデータを伝えるための文章といった違いがあります。またXMLはHTMLと違ってタグを新しく定義して用いることができます。
実際にはSVGの描写をXMLですべて直接記述するのは大変ですので描写ソフトウェアを使ってSVGを作成、変換をする場合が多いです。

今回はSVG用いて矩形をHTML上に表示しました。



XML要素は以下の部分です。
<rect x="100" y="100" width="100" height="100" stroke="#000000" fill="#b0e0e6" stroke-width="2">
XML要素内で描写内容、スタイルを記述しています。
SVGのXMLは開始タグ終了タグで挟まない空要素なのでタグの最後は/>となります。