HTML5 インライン SVG

HTML5は内蔵SVGをサポートしています。

SVGとは何ですか？

  • SVGは拡張可能なベクトルグラフィックス（Scalable Vector Graphics）を指します
  • SVGはネットワークで使用されるベクトルグラフィックを定義するために使用されます
  • SVGはXML形式で图形を定義しています
  • SVG画像は拡大やサイズ変更をしてもグラフィックの品質が低下しません
  • SVGはワールドワイドウェブ同盟の標準です

SVGの利点

JPEG や GIF などの他の画像形式と比較して、SVGを使用する利点は：

  • SVG 画像はテキストエディタで作成および変更できます
  • SVG 画像は検索、索引、スクリプト化、圧縮ができます
  • SVG は拡張可能です
  • SVG 画像はどんな解像度でも高品質に印刷できます
  • SVG は画像の品質が低下しないまま拡大できます

ブラウザのサポート

Internet Explorer 9、Firefox、Opera、Chrome、Safari が内連 SVG をサポートしています。

SVG を直接 HTML ページに埋め込む

HTML5 では、SVG 要素を直接 HTML ページに埋め込むことができます：

例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

自分で試してみる

結果：

SVG 教程

SVG に関するより多くの知識を学ぶために、私たちの SVG 教程。