<SVG> …… ベクター図形を表す

SVGは、ベクター図形を表す際に使用します。

SVG（Scalable Vector Graphics）は、ベクター形式による図形です。 png、gif、jpegなどのラスター形式の画像が拡大表示すると表示が荒くなるのに対して、 SVGはベクター形式の図形であるため、拡大表示しても滑らかに描画されるのが特長です。

SVGをHTMLドキュメント中に表示するには、 png、gif、jpegなど形式の画像ファイルと同様に、 img要素のsrc属性の値として指定したり、 CSSで画像を利用するプロパティの値に指定するなどの方法で表示できます。

■使用例

以下のサンプルは、SVG形式とPNG形式で作成した画像を比較したものです。 SVG画像はベクター形式なので、拡大表示しても滑らかに描画されます。 拡大縮小して違いをご確認ください。

<p>
SVG画像とPNG画像です。拡大縮小して違いをご確認ください。
</p>
<p>
<img src="sample/svg_star.svg" alt="SVG画像">
<img src="sample/svg_star.png" alt="PNG画像">
</p>

■関連項目

Sponsors