HTML5_html5 チュートリアル ヒントを使用して SVG ベクター グラフィックスを描画するための入門チュートリアル

VG は Scalable Vector Graphics の略で、2D グラフィックスを記述するための言語です。グラフィックス アプリケーションは XML を使用して記述され、SVG リーダー プログラムによってレンダリングされます。

SVG は主に、円グラフ、X、Y 座標系の 2 次元グラフなどのベクトル型グラフに使用されます。

SVG は、2003 年 1 月 14 日に W3C 勧告になりました。SVG 仕様の最新バージョンは、SVG 仕様ページで参照できます。

SVG ファイルの表示
ほとんどの Web ブラウザは、PNG、GIF、JPG グラフィックを表示できるのと同じように、SVG を表示できます。 IE ユーザーがブラウザで SVG を表示できるようにするには、Adobe SVG Reader のインストールが必要な場合があります。

HTML5 に SVG を埋め込む
HTML5 では、__ タグを使用して SVG を直接埋め込むことができます。次のような単純な構文です。

XML/HTML コードコンテンツをクリップボードにコピー

1. <svg xmlns="http://www .w3.org/2000/svg">
2. ...
3. svg>

HTML5 - SVG サークル
これは、 タグを使用して円を描画する HTML5 バージョンの SVG サンプルです。

XML/HTML コード

コンテンツをクリップボードにコピー

1. >
2. <頭>
3. <タイトル>SVGタイトル>
4. <meta charset="utf- 8" />
5. 頭>
6. <ボディ>
7. <h2>HTML5 SVG Circle h2>
8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
9. <circle id="redcircle" cx="50" cy="50" r="50" fill ="赤" />
10. svg>
11. ボディ>
12. html>

在启用 HTML5 の最新版 FireFox 中会生成如下结果：

HTML5 - SVG 四角形
下は、 を使用した SVG 例の HTML5 バージョンです。 标签绘制一个四角形：

XML/HTML コード复制コンテンツ到剪贴板

1. >
2. <頭>
3. <タイトル>SVGタイトル>
4. <meta charset="utf- 8" />
5. 頭>
6. <ボディ>
7. <h2>HTML5 SVG 長方形 h2>
8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
9. <rect id="リダイレクト" 幅="300" 高さ="100" fill="赤" / >
10. svg>
11. ボディ>
12. html>

在启用 HTML5 の最新版 FireFox 中会生成如下结果：

HTML5 - SVG 線条
下は、 を使用した SVG サンプルの HTML5 バージョンです。 标签绘制一个線上条：

XML/HTML コード复制コンテンツ到剪贴板

1. >
2. <頭>
3. <タイトル>SVGタイトル>
4. <meta charset="utf- 8" />
5. 頭>
6. <ボディ>
7. <h2>HTML5 SVG Line h2>
8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
9. <行 x1="0" y1="0" x2="200" y2="100"
10. スタイル="ストローク:赤;ストローク幅:2"/>
11. svg>
12. ボディ>
13. html>

スタイル プロパティを使用して、電子画、塗りつぶし色、電子画度などの追加の形式情報を設定できます。

在启用 HTML5 の最新版 FireFox 中会生成如下结果：

HTML5 - SVG 椭圆
下は、 を使用した SVG 例の HTML5 バージョンです。 标签绘制一个椭圆：

XML/HTML コード复制コンテンツ到剪贴板

1. >
2. <頭>
3. <タイトル>SVGタイトル>
4. <meta charset="utf- 8" />
5. 頭>
6. <ボディ>
7. <h2>HTML5 SVG 楕円 h2>
8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
9. <楕円 cx="100" cy="50" rx="100" ry="50" fill ="赤" />
10. svg>
11. ボディ>
12. html>

在启用 HTML5 の最新版 FireFox 中会生成如下结果：

HTML5 - SVG 多形
以下は、 を使用した SVG サンプルの HTML5 バージョンです。 标签绘制一个多边形：

XML/HTML コード复制コンテンツ到剪贴板

1. >
2. <頭>
3. <タイトル>SVGタイトル>
4. <meta charset="utf- 8" />
5. 頭>
6. <ボディ>
7. <h2>HTML5 SVG ポリゴン h2>
8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
9. <ポリゴン ポイント="20, 10 300,20, 170,50" fill="赤" />
10. svg>
11. ボディ>
12. html>

在启用 HTML5 の最新版 FireFox 中会生成如下结果：

HTML5 - SVG 折り線
以下は、

を使用した SVG サンプルの HTML5 バージョンです。 标签绘制一折線图：

XML/HTML コード复制コンテンツ到剪贴板

1. >
2. <頭>
3. <タイトル>SVGタイトル>
4. <meta charset="utf- 8" />
5. 頭>
6. <ボディ>
7. <h2>HTML5 SVG ポリライン h2>
8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
9. <ポリライン ポイント="0, 0 0,20 20,20 20,40 40,40 40,60" fill="赤" />
10. svg>
11. ボディ>
12. html>

在启用 HTML5 の最新版 FireFox 中会生成如下结果：

HTML5 - SVG 渐变
下は、 を使用した SVG 例の HTML5 バージョンです。 标签绘制一椭圆、使用 マークは SVG の半径方向の変化を設定します。

同様の方法で を使用できます。

は SVG 線形変化を構築します。

XML/HTML コード复制コンテンツ到剪贴板

1. >
2. <頭>
3. <タイトル>SVGタイトル>
4. <meta charset="utf- 8" />
5. 頭>
6. <ボディ>
7. <h2>HTML5 SVG Gradient Ellipseh2>
8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
9. <defs>
10. <radialGradient id="グラデーション" cx="50%" cy= "50%" r="50%"
11. fx="50%" fy= "50%">
12. <停止 オフセット="0% " スタイル="stop-color:rgb(200,200,200);
13. stop-opacity:0"/>
14. <停止 オフセット="100% " スタイル="stop-color:rgb(0,0,255);
15. stop-opacity:1"/>
16. radialGradient>
17. defs>
18. <楕円 cx="100" cy="50" rx="100" ry="50"
19. スタイル="fill:url(#gradient)" />
20. svg>
21. ボディ>
22. html>

HTML5 が有効になっている FireFox の最新バージョンでは、次の結果になります: