HTML5 インライン SVG

HTML5 Canvas HTML 5 Canvas vs. SVG

SVG とは何ですか?

  • SVG はスケーラブル ベクター グラフィックスの略です
  • SVG は、ウェブ用のベクターベースのグラフィックを定義するために使用されます
  • SVG は XML 形式を使用してグラフィックを定義します
  • SVG 画像は、グラフィック品質を損なうことなく拡大またはサイズ変更できます
  • SVG は World Wide Web コンソーシアムの標準です

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>

自分で試してみてください

结果：

HTML5 Canvas HTML 5 Canvas vs. SVG