HTML5-SVG
SVGは S校正可能 Vエクター Graphicsは、2DグラフィックスとグラフィカルアプリケーションをXMLで記述するための言語であり、XMLはSVGビューアによってレンダリングされます。
SVGは主に、円グラフ、X、Y座標系の2次元グラフなどのベクトルタイプの図に役立ちます。
SVGは、2003年1月W3C勧告14.になって、あなたはでSVG仕様の最新バージョンを確認することができますSVG仕様。
SVGファイルの表示
ほとんどのWebブラウザーは、PNG、GIF、およびJPGを表示できるのと同じようにSVGを表示できます。Internet Explorerユーザーは、ブラウザーでSVGを表示できるようにするために、Adobe SVGViewerをインストールする必要がある場合があります。
HTML5へのSVGの埋め込み
HTML5では、を使用してSVGを直接埋め込むことができます <svg>...</svg> 次の簡単な構文を持つタグ-
<svg xmlns = "http://www.w3.org/2000/svg">
...
</svg>Firefox 3.7には、次の手順を使用してHTML5を有効にできる構成オプション（ "about：config"）も導入されています。
タイプ about:config Firefoxのアドレスバーにあります。
「気をつけます、約束します！」をクリックします。表示される警告メッセージのボタン（そしてそれを遵守していることを確認してください！）。
タイプ html5.enable ページ上部のフィルターバーに入力します。
現在は無効になっているので、クリックして値をtrueに切り替えます。
これで、Firefox HTML5パーサーが有効になり、次の例を試すことができるはずです。
HTML5-SVGサークル
以下は、<circle>タグを使用して円を描くSVGの例のHTML5バージョンです-
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Circle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
</svg>
</body>
</html>これにより、HTML5対応の最新バージョンのFirefoxで次の結果が生成されます。
HTML5 −SVG長方形
以下は、<rect>タグを使用して長方形を描画するSVGの例のHTML5バージョンです-
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Rectangle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<rect id = "redrect" width = "300" height = "100" fill = "red" />
</svg>
</body>
</html>これにより、HTML5対応の最新バージョンのFirefoxで次の結果が生成されます。
HTML5-SVGライン
以下は、<line>タグを使用して線を引くSVGの例のHTML5バージョンです-
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Line</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<line x1 = "0" y1 = "0" x2 = "200" y2 = "100"
style = "stroke:red;stroke-width:2"/>
</svg>
</body>
</html>あなたは使用することができます style 線と塗りの色、線の幅などの追加のスタイル情報を設定できる属性。
これにより、HTML5対応の最新バージョンのFirefoxで次の結果が生成されます。
HTML5 −SVG楕円
以下は、<ellipse>タグを使用して楕円を描画するSVGの例のHTML5バージョンです-
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Ellipse</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
</svg>
</body>
</html>これにより、HTML5対応の最新バージョンのFirefoxで次の結果が生成されます。
HTML5-SVGポリゴン
以下は、<polygon>タグを使用してポリゴンを描画するSVGの例のHTML5バージョンです-
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Polygon</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polygon points = "20,10 300,20, 170,50" fill = "red" />
</svg>
</body>
</html>これにより、HTML5対応の最新バージョンのFirefoxで次の結果が生成されます。
HTML5-SVGポリライン
以下は、<polyline>タグを使用してポリラインを描画するSVGの例のHTML5バージョンです-
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Polyline</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
</svg>
</body>
</html>これにより、HTML5対応の最新バージョンのFirefoxで次の結果が生成されます。
HTML5-SVGグラデーション
以下は、<ellipse>タグを使用して楕円を描画し、<radialGradient>タグを使用してSVG放射状グラデーションを定義するSVGの例のHTML5バージョンです。
同様に、<linearGradient>タグを使用してSVG線形グラデーションを作成できます。
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%"
fy = "50%">
<stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
<stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx = "100" cy = "50" rx = "100" ry = "50"
style = "fill:url(#gradient)" />
</svg>
</body>
</html>これにより、HTML5対応の最新バージョンのFirefoxで次の結果が生成されます。
HTML5-SVGスター
以下は、<polygon>タグを使用して星を描くSVGの例のHTML5バージョンです。
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Star</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
</svg>
</body>
</html>これにより、HTML5対応の最新バージョンのFirefoxで次の結果が生成されます。