情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

SVG入門(2)SVG画像の基本的な作成方法1

この記事は「SVG入門」という連載記事の2つ目の記事です。

その他の記事に関しては下を参照してください。

はじめに

今回はSVG画像の基本的な作成方法を見ていきたいと思います。主にSVG画像で図形を描画する方法です。

今回だけでは書き切れなかったので、次回以降に続きます。

なお、SVGはXMLで記述しますので、XMLについてある程度の知識を持っていることが前提となります。

SVG画像の作成

前回も書きましたが、SVGはXMLで記述します。

すなわち、1つのSVG画像は1つのXMLドキュメントとなります。

そのため、SVG画像には普通のXMLドキュメントと同じくルート要素が必要となります。

SVGの場合、ルート要素としては<svg>要素を使用します。

ちなみに、余談ですが、全てのSVG画像のルート要素は<svg>要素となりますが、全ての<svg>要素がSVG画像のルート要素となる訳ではありませんので注意してください。

<svg>要素は入れ子にすることができます。つまり、<svg>要素の中に別の<svg>要素を格納することができます。

閑話休題。

取り敢えず重要なのは、

  • SVG画像のルート要素は<svg>要素

であるということです。

名前空間

単に<svg>要素を使用するだけではそれが本当にSVGの<svg>要素であるか分かりません。もしかしたらSVG以外の何らかの形式で定義されている<svg>要素かもしれません。

そこで、<svg>要素がSVGの<svg>要素であることを示すために<svg>要素に名前空間を指定します。

SVGの名前空間はhttp://www.w3.org/2000/svgとなっています。

なので、<svg>要素のxmlns属性にこの値を指定します。

つまり、下のようになります。

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

これでSVG画像に最低限必要な要素は揃いました。

つまり、上のXMLドキュメントが最小のSVG画像です

しかし、これだけではブラウザで開いてみても何も表示されません。画像において描画する図形について何も記述していないのだから当然です。

実際に下に上のSVG画像を読み込んでみます。

何も表示されていないかと思います。ただし、何も表示されていない空間だけは空いています。SVG画像自体は読み込まれているということです。

SVG画像に図形を描画するにはSVG画像の<svg>要素の中に図形を表す要素を格納しなければなりません。

図形

SVG画像で描画できる図形には下のようなものがあります。

  • <line>要素・・・線分
  • <rect>要素・・・長方形
  • <circle>要素・・・円
  • <ellipse>要素・・・楕円
  • <polygon>要素・・・多角形
  • <polyline>要素・・・折れ線(複数の線分の連なり)

これらの図形は内部と縁から成ります。

たとえば、長方形の場合、長方形の辺が縁となり、辺の内側が内部となります。

そして、図形の縁と内部をどのように描画するか指定することによって図形の外観を定義します。

それでは、1つ1つの図形を見ていきましょう。ただし、今回は線分のみ取り上げます。それ以外の図形に関しては次回取り上げます。

線分

線分を描画するには<line>要素を使用します。

線分は始点と終点の座標によって表されます。これを指定するには下のような属性を使用します。

  • x1・・・始点のx座標を指定します。
  • y1・・・始点のy座標を指定します。
  • x2・・・終点のx座標を指定します。
  • y2・・・終点のy座標を指定します。

たとえば、始点の座標が(50, 50)で終点の座標が(100, 100)である線分を描画するには下のようにします。

<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="100" y2="100"></line>
</svg>

しかし、これでも何も表示されません。

これは線分の色が指定されていないためです。

線分には内部というものはありません。線分自体は縁として描画されます。

縁の色を指定するにはstrokeプロパティを指定します。線分の場合、これが線分の色となります。

縁の色は図形の外観の1つなので図形のstyle属性に指定します。

たとえば、赤色の線分を描画するには下のようにします。

<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="100" y2="100" style="stroke: red;"></line>
</svg>

このように、style属性にプロパティを指定する場合にはプロパティ名、:、プロパティの値、;という順番で記述します。これはCSSのプロパティの記述と同じです。

なお、strokeプロパティのデフォルトの値はnoneとなっています。

プロパティにおける色の指定方法はCSSにおけるものと同じです。

縁の幅を指定するにはstroke-widthプロパティを指定します。デフォルトは1です。

<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="100" y2="50" style="stroke: red; stroke-width: 2;"></line>
    <line x1="50" y1="100" x2="100" y2="100" style="stroke: red; stroke-width: 4;"></line>
    <line x1="150" y1="50" x2="200" y2="50" style="stroke: red; stroke-width: 6;"></line>
    <line x1="150" y1="100" x2="200" y2="100" style="stroke: red; stroke-width: 8;"></line>
</svg>

縁の不透明度を指定するにはstroke-opacityプロパティを指定します。デフォルトは1.0です。不透明度は0.0から1.0までの値で指定します。0.0が完全な透明を表し、1.0が完全な不透明を表します。

<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="100" y2="50" style="stroke: red; stroke-width: 2; stroke-opacity: 1.0;"></line>
    <line x1="50" y1="100" x2="100" y2="100" style="stroke: red; stroke-width: 2; stroke-opacity: 0.8;"></line>
    <line x1="150" y1="50" x2="200" y2="50" style="stroke: red; stroke-width: 2; stroke-opacity: 0.6;"></line>
    <line x1="150" y1="100" x2="200" y2="100" style="stroke: red; stroke-width: 2; stroke-opacity: 0.4;"></line>
</svg>

縁を破線にするにはstroke-dasharrayプロパティを指定します。空隙でない部分の長さと空隙の部分の長さを交互に指定します。

<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="100" y2="50" style="stroke: red; stroke-width: 2; stroke-dasharray: 1 1 2 2;"></line>
    <line x1="50" y1="100" x2="100" y2="100" style="stroke: red; stroke-width: 2; stroke-dasharray: 10 10;"></line>
</svg>

縁の端の形状を指定するにはstroke-linecapプロパティを指定します。buttroundsquareを指定します。デフォルトはbuttです。buttを指定した場合には何も行いません。roundを指定した場合には端に丸みを付けます。squareを指定した場合には端に角を付けます。

<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="100" y2="50" style="stroke: red; stroke-width: 5; stroke-linecap: butt;"></line>
    <line x1="50" y1="100" x2="100" y2="100" style="stroke: red; stroke-width: 5; stroke-linecap: round;"></line>
    <line x1="150" y1="50" x2="200" y2="50" style="stroke: red; stroke-width: 5; stroke-linecap: square;"></line>
</svg>

座標系

図形の位置や大きさなどを指定する場合に使用する通常の座標系はSVG画像の左上端の座標を(0, 0)とし、右方向に行くにつれてx座標が大きくなり、下方向に行くにつれてy座標が大きくなるものです。

また、SVG画像の右下端のx座標はSVG画像の実際の幅と同じになり、y座標は高さと同じになります。

ただし、これは通常の座標系の場合であって、SVGでは別の座標系が使用されることもありますので注意してください。

単位

図形の長さや大きさ、座標などを指定する場合には単位を付けなければなりません。

単位には下のようなものがあります。

  • em・・・デフォルトのフォントの高さです。
  • ex・・・デフォルトのフォントの文字xの高さです。
  • px・・・ピクセルです。
  • pt・・・ポイント(72分の1インチ)です。
  • pc・・・パイカ(6分の1インチ)です。
  • cm・・・センチメートルです。
  • mm・・・ミリメートルです。
  • in・・・インチです。

ただし、単位は省略することもできます省略した場合、単位はpxとなります

<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="0.5cm" y1="50" x2="1cm" y2="50" style="stroke: red; stroke-width: 5; stroke-linecap: butt;"></line>
    <line x1="0.5in" y1="100" x2="1in" y2="100" style="stroke: red; stroke-width: 5; stroke-linecap: round;"></line>
</svg>

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-svg