Home » ★HTML Living Standard リファレンス

★HTML Living Standard リファレンス

<SVG> …… ベクター図形を表す
Internet Explorer
Microsoft Edge
Google Chrome
Safari
Firefox
Opera
広告



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

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

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

■使用例

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

HTMLソース

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

↓↓↓

ブラウザ上の表示

SVG画像とPNG画像です。拡大縮小して違いをご確認ください。

SVG画像
PNG画像

■関連項目

  • <img> …… 画像を表す
  • <canvas> …… スクリプトで図形を描く
SVG 2の仕様(外部サイト)
Latest version: https://www.w3.org/TR/SVG2/
Editors draft: https://svgwg.org/svg2-draft/
広告



Lorem Ipsum is simply dummy text

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.