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 タイムリム。