HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5でSVG（Scalable Vector Graphics）を操作する方法をわかりやすく解説

SVGは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略称で、2DグラフィックスやグラフィックアプリケーションをXML形式で記述するための言語です。記述されたXMLコードは、SVGビューアによって描画されます。

SVGは、円グラフやXY座標系における2次元グラフなど、ベクター形式の図表を扱う場面で特に威力を発揮します。拡大・縮小しても画質が劣化しない点も大きな特徴です。

HTML5でSVGを使用する基本的な方法

HTML5でSVG（Scalable Vector Graphics）を扱うには、<svg>...</svg>タグを使ってドキュメント内に直接埋め込みます。基本的な構文は以下のとおりです。

構文

<svg xmlns="https://www.w3.org/2000/svg">
    ...
</svg>

HTML5のSVGで図形を描画するには、目的に応じて以下の要素を使い分けます。

  • <circle>要素：円を描く
  • <rect>要素：長方形を描く
  • <line>要素：直線を描く
  • <ellipse>要素：楕円を描く
  • <polygon>要素：多角形を描く

また、<img>、<iframe>、<object>、<embed>などのタグを使えば、外部ファイルとしてWebページにSVGを組み込むことも可能です。ここでは、<svg>タグを使ってHTML5ページにSVGを直接追加する方法を見ていきましょう。

HTML5でSVG（Scalable Vector Graphics）を操作する方法をわかりやすく解説

以下のコードを実行すると、HTML5でSVGを扱う流れを実際に確認できます。この例では、緑色の円を1つ描画しています。

サンプルコード

<!DOCTYPE html>
<html>
    <head>
        <style>
            #svgelem {
                position: relative;
                left: 10%;
                -webkit-transform: translateX(-20%);
                -ms-transform: translateX(-20%);
                transform: translateX(-20%);
            }
        </style>
        <title>HTML5 SVG Circle</title>
    </head>
    <body>
        <h2>HTML5 SVG Circle</h2>
        <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
            <circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
        </svg>
    </body>
</html>
  1. HTML5のarc()メソッドで円を描く方法をわかりやすく解説

    HTML5では、<canvas>要素とarc()メソッドを組み合わせることで、簡単に円を描くことができます。完全な円を描きたい場合は、開始角度を「0」、終了角度を「2 * Math.PI」に指定するのがポイントです。 arc()メソッドのパラメータ一覧 arc()メソッドには、以下の6つのパラメータを渡します。 No.パラメータ説明 1x円の中心のx座標 2y円の中心のy座標 3r円の半径 4startingAngle描画開始の角度（ラジアン単位） 5endingAngle描画終了の角度（ラジアン単位） 6counterclockwise（true / false）反時計回りに

  2. HTML5のlineTo()メソッドで線を描画する方法

    HTML5のlineTo()メソッドで線を描画する方法HTMLで線を描画するには、canvas要素を使用します。canvas上に線を引く際に活躍するのがlineTo()メソッドです。このメソッドはx座標とy座標の2つのパラメータを受け取り、指定した位置までの直線を定義します。lineTo()メソッドは単独では機能せず、以下のメソッドと組み合わせて使用するのが基本の流れです。beginPath(): 新しいパスの作成を開始するmoveTo(): 線の始点となる座標を指定するlineTo(): 線の終点となる座標を指定するstroke(): 定義したパスを実際に画面へ描画するサンプルコード以下のコ