SVG画像表示領域を作成する

SVG画像表示領域を作成するコードを紹介します。

概要

SVGの画像表示領域を作成するにはSVGタグを利用します。

プログラム例1:SVGの領域を作成する

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        <!--
        body{
            background-color:#E0E0E0;
        }
        .SvgFrame{
            border:solid 1px #404040;
        }
        -->
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
    </svg>
</body>
</html>

解説

下記のSVGタグがSVG画像の表示領域を作成するコードになります。height width 属性が表示領域の高さと幅になります。viewBoxは表示領域にどの範囲を表示するかの設定になります。今回は 0 0 640 320 としているため、(x,y)=(0.0)と(x,y)=(640.320) を対角とする領域がSVGタグで表示されます。

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
  </svg>

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の枠が表示され、SVG画像が表示される領域が作成できました。

プログラム例2:SVGの領域の作成と図形の描画

次の例ではSVGの領域を作成して図形も描画するコードを紹介します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    <!--
      body{
        background-color:#E0E0E0;
      }
      .SvgFrame{
        border:solid 1px #404040;
      }
    -->
  </style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
    <line x1="20" y1="10" x2="250" y2="180" style="stroke:rgb(0,0,128);stroke-width:1" />
    <circle cx="420" cy="200" r="130" style="fill-opacity:0; stroke:#ff6a00;stroke-width:1"/>
    <path d="M320 20 H 180 V 120 H 180 L 320 120"  style="fill:#059a3a;stroke-width:0"/>
  </svg>
</body>
</html>

解説

下記がSVGのコードです。svgタグでは先の例で紹介した通り、svg画像を表示する領域を定義します。height, width, viewBox の値は先の例と同じ値を利用しています。
svgタグ内では line, circle, path のタグを記述しています。これらのタグで直線、円、矩形の塗りつぶしを描画します。

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
    <line x1="20" y1="10" x2="250" y2="180" style="stroke:rgb(0,0,128);stroke-width:1" />
    <circle cx="420" cy="200" r="130" style="fill-opacity:0; stroke:#ff6a00;stroke-width:1"/>
    <path d="M320 20 H 180 V 120 H 180 L 320 120"  style="fill:#059a3a;stroke-width:0"/>
  </svg>