Html5-svg
HTML5-SVG
SVGは* S calable V ector G * raphicsの略で、2DグラフィックスとグラフィカルアプリケーションをXMLで記述するための言語であり、XMLはSVGビューアーによってレンダリングされます。
SVGは主に、円グラフ、X、Y座標系の2次元グラフなどのベクトルタイプの図に役立ちます。
SVGはW3C勧告14になりました。 2003年1月。SVG仕様の最新バージョンはhttps://www.w3.org/TR/SVG/[SVG Specification]で確認できます。
SVGファイルの表示
ほとんどのWebブラウザーは、PNG、GIF、およびJPGを表示できるように、SVGを表示できます。 Internet Explorerユーザーは、ブラウザでSVGを表示できるようにhttps://www.adobe.com/svg/viewer/install/[Adobe SVG Viewer]をインストールする必要がある場合があります。
HTML5にSVGを埋め込む
HTML5では、次の単純な構文を持つ <svg> … </svg> タグを使用してSVGを直接埋め込むことができます-
<svg xmlns = "http://www.w3.org/2000/svg">
...
</svg>Firefox 3.7は、次の手順を使用してHTML5を有効にできる構成オプション（ "about：config"）も導入しました-
- Firefoxのアドレスバーに「 about：config 」と入力します。
- 「注意してください、約束します！」をクリックします。表示される警告メッセージのボタンを押してください（そして、それに必ず従ってください！）。
- 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で次の結果が生成されます。
