English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 基本チュートリアル

HTML5 API

HTML5 メディア

HTML5 図形

HTML5 内蔵SVG

HTML5 内蔵SVGをサポートしています。SVGファイルは以下のタグでHTMLドキュメントに埋め込むことができます：<embed>、<object>または<iframe> (embedおよびiframeは内蔵フレームワークに属します）。これらのタグを使用して、SVGのコードを直接HTMLページに埋め込むことができます。または、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>
<head>　
<meta　charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<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で円を描画

!doctype　html>
<html>
<head>
<meta　charset="utf-8">
<title>使用SVGで円を描画　oldtoolbag.com</title>
</head>
<body>
　　　　<svg　xmlns="http://www.w3.org/2000/svg"　height="500px"　width="500px"　version="1.1">
　　　　　　<circle　cx="200"　cy="100"　r="100"　stroke="#afeedd"
　　　　　　stroke-width="5"　fill="#f0ddff"　/>
　　　　</svg>
</body>
</html>
テストしてみてください‹/›

  • <svg>タグ内でheightそしてwidth属性でSVGドキュメントの高さと幅を設定します；version属性で使用するSVGのバージョンを定義できます；xmlns 属性でSVGのネームスペースを定義できます；

  • <circle>はSVGで円を作成するためのタグです；cx そして cy 属性で円の中心を定義します； x そして y 座標、この2つの属性を省略すると、円点は(0, 0)に設定されます；r属性で円の半径を定義します；

  • stroke そして stroke-width 属性で形状の輪郭の表示方法を制御します；fill 属性で形状内の色を設定します；
    デモ画像を見てみましょう：

SVGで矩形を描画する

!doctype　html>
<html>
<head>
<meta　charset="utf-8">
<title>用SVGで矩形を描画　oldtoolbag.com</title>
</head>
<body>
　　　　<svg　xmlns="http://www.w3.org/2000/svg"　width="500px"　height="500px"　version="1.1">
　　　　　　<rect　x="50"　y="100"　width="300"　height="150"
　　　　　　style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/>
　　　　</svg>
</body>
</html>
テストしてみてください‹/›

SVGとCanvasの違い。

SVGはXMLを使用して描画する。 2D図形の言語。

CanvasはJavaScriptで描画されます。 2D図形。

SVGはXMLに基づいています。これは、SVG DOMの各要素が利用可能であることを意味します。特定の要素にJavaScriptイベントハンドラを追加できます。

SVGでは、それぞれ描かれた図形はオブジェクトとして見なされます。SVGオブジェクトの属性が変更されると、ブラウザが自動的に図形を再現します。

Canvasはピクセルごとにレンダリングされます。Canvasでは、一旦図形が描画されると、それ以降ブラウザの注目を得ることはありません。位置が変更された場合、全体のシーンが再描画されなければなりません。それには、図形で覆われた可能性のあるどんなオブジェクトも含まれます。

CanvasとSVGの比較

以下の表は、canvasとSVGの間のいくつかの違いを示しています。

CanvasSVG

  • 解像度に依存する

  • イベントハンドラをサポートしない

  • 弱いテキストレンダリング能力

  • 結果画像を .png または .jpg フォーマットで保存することができます

  • 画像密集型のゲームに最適で、多くのオブジェクトが頻繁に再描画される

  • 解像度に依存しない

  • イベントハンドラをサポート

  • 大型なレンダリングエリアを持つアプリケーション（例えば、Google Maps）に最適

  • 複雑さが高くなるとレンダリング速度が遅くなる（DOMを過度に使用するアプリケーションは速くない）

  • ゲームアプリケーションには適していない

HTML5 MathMLHTML5 Canvas