情報アイランド

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

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

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

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

はじめに

今回もSVG画像の基本的な作成方法を見ていきたいと思います。

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

長方形

長方形を描画するには<rect>要素を使用します。

長方形は左上の角の座標と幅と高さによって表されます。これらを指定するには下のような属性を使用します。

  • x・・・左上の角のx座標を指定します。
  • y・・・左上の角のy座標を指定します。
  • width・・・幅を指定します。
  • height・・・高さを指定します。

たとえば、左上の角の座標が(50, 50)で幅が100で高さが50である長方形を描画するには下のようにします。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="50" y="50" width="100" height="50" style="stroke: red; stroke-width: 2;"></rect>
</svg>

何も指定していないのに内部が黒色で塗り潰されている長方形が表示されました。

これは内部の色は黒色がデフォルトであるためです。

内部の色を指定するにはfillプロパティを指定します。

たとえば、内部が白色の長方形を描画するには下のようにします。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="50" y="50" width="100" height="50" style="stroke: red; stroke-width: 2; fill: white;"></rect>
</svg>

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

ちなみに、白色と透明色は違う色ですので注意してください。白色はwhiteで透明色はtransparentです。

白色と透明色の違いは下の2つの画像を比べれば明らかでしょう。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="75" width="100" height="50" style="stroke: red; stroke-width: 2; fill: aqua;"></rect>
    <rect x="50" y="50" width="100" height="50" style="stroke: red; stroke-width: 2; fill: white;"></rect>
</svg>


<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="75" width="100" height="50" style="stroke: red; stroke-width: 2; fill: aqua;"></rect>
    <rect x="50" y="50" width="100" height="50" style="stroke: red; stroke-width: 2; fill: transparent;"></rect>
</svg>

つまり、透明色の場合、図形の後ろにある図形が描画されることになります。

また、複数の図形が重なっている場合、後に記述した図形が前に表示されることにも注意してください。つまり、図形は記述したのと同じ順番で描画されます

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

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="75" width="100" height="50" style="stroke: red; stroke-width: 2; fill: aqua;"></rect>
    <rect x="50" y="50" width="100" height="50" style="stroke: red; stroke-width: 2; fill: white; fill-opacity: 0.8;"></rect>
</svg>

縁の角の形状を指定するにはstroke-linejoinプロパティを指定します。miterroundbevelを指定します。デフォルトはmiterです。miterを指定した場合には角が尖ります。roundを指定した場合には角に丸みが付きます。bevelを指定した場合には角が面取りされます。

また、miterを指定した場合には角がある角度より鋭角である場合にはbevelに切り替わるようになっていますが、stroke-miterlimitプロパティを指定することで切り替わる角度を変更することができるようになっています。デフォルトは4です。値が大きいほどbevelに切り替わる角度がより鋭角になります。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="75" width="100" height="50" style="stroke: red; stroke-width: 10; stroke-linejoin: miter; fill: aqua;"></rect>
    <rect x="50" y="50" width="100" height="50" style="stroke: red; stroke-width: 10; stroke-linejoin: round; fill: white; fill-opacity: 0.8;"></rect>
    <rect x="175" y="50" width="100" height="50" style="stroke: red; stroke-width: 10; stroke-linejoin: bevel; fill: yellow; fill-opacity: 0.8;"></rect>
</svg>


角が丸い長方形

角が丸い長方形を描画するにも<rect>要素を使用します。

普通の長方形の属性に加えて下のような属性を使用します。

  • rx・・・丸い角のx方向の半径を指定します。
  • ry・・・丸い角のy方向の半径を指定します。

たとえば、丸い角の半径が10である長方形を描画するには下のようにします。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="50" y="50" width="100" height="50" rx="10" ry="10" style="stroke: red; stroke-width: 2; fill: white;"></rect>
</svg>

円を描画するには<circle>要素を使用します。

円は中心の座標と半径によって表されます。これらを指定するには下のような属性を使用します。

  • cx・・・中心のx座標を指定します。
  • cy・・・中心のy座標を指定します。
  • r・・・半径を指定します。

たとえば、中心の座標が(50, 50)で半径が40である円を描画するには下のようにします。

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" style="stroke: red; stroke-width: 2; fill: white;"></circle>
</svg>

楕円

楕円を描画するには<ellipse>要素を使用します。

楕円は中心の座標とx方向とy方向の半径によって表されます。これらを指定するには下のような属性を使用します。

  • cx・・・中心のx座標を指定します。
  • cy・・・中心のy座標を指定します。
  • rx・・・x方向の半径を指定します。
  • ry・・・y方向の半径を指定します。

たとえば、中心の座標が(50, 50)でx方向の半径が40でy方向の半径が20である楕円を描画するには下のようにします。

<svg xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="50" cy="50" rx="40" ry="20" style="stroke: red; stroke-width: 2; fill: white;"></ellipse>
</svg>

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

-svg