Html5-svg

提供：Dev Guides

移動先:案内、検索

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で次の結果が生成されます。

「https://www.finddevguides.com/index.php?title=Html5-svg&oldid=9623」から取得

Html5 Tutorial