情報アイランド

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

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

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

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

はじめに

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

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

多角形

多角形を描画するには<polygon>要素を使用します。

多角形は頂点の座標によって表されます。これを指定するには下のような属性を使用します。

  • points・・・全ての頂点のx座標とy座標を順番に指定します。それぞれの座標は,か空白で区切ります。ただし、座標に単位を付加することはできません

たとえば、頂点の座標が(10, 30)(140, 40)(70, 80)(30, 90)である多角形を描画するには下のようにします。

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="10 30 140 40 70 80 30 90" style="stroke: red; stroke-width: 2; fill: white;"></polygon>
</svg>

なお、多角形の辺は交差させることもできます。たとえば、五芒星を描画するには下のようにします。

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="48 16 16 96 96 48 0 48 80 96" style="stroke: red; stroke-width: 2; fill: aqua;"></polygon>
</svg>

この時、交差した辺によって図形の内部が幾つかの領域に分割されます。この分割された領域のどの部分を図形の内側とするかを指定するにはfill-ruleプロパティを使用します。nonzeroevenoddを指定します。デフォルトはnonzeroです。

evenoddの場合、五芒星は下のように描画されます。つまり、五芒星の中央の領域は図形の内部と見做されません。

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="48 16 16 96 96 48 0 48 80 96" style="stroke: red; stroke-width: 2; fill: aqua; fill-rule: evenodd;"></polygon>
</svg>

折れ線

折れ線を描画するには<polyline>要素を使用します。

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

  • points・・・始点と全ての頂点と終点のx座標とy座標を順番に指定します。それぞれの座標は,か空白で区切ります。ただし、座標に単位を付加することはできません

なお、折れ線の場合、何故か内部(折れ線に内部というものは存在しないのですが)の描画が試みられ、おかしな描画結果となることがありますfillプロパティのデフォルトの値はblackなので、内部が描画されないようにfillプロパティにnoneを指定するようにします

たとえば、始点の座標が(10, 30)で頂点の座標が(140, 40)(70, 80)で終点の座標が(30, 90)である折れ線を描画するには下のようにします。

<svg xmlns="http://www.w3.org/2000/svg">
    <polyline points="10 30 140 40 70 80 30 90" style="stroke: red; stroke-width: 2; fill: none;"></polyline>
</svg>

大きさ

今までの例ではSVG画像の大きさを指定していませんでしたが、当然SVG画像の大きさを指定することもできます。

SVG画像の大きさを指定するには<svg>要素にwidth属性とheight属性を指定します。width属性の値が画像の幅を表し、height属性の値が高さを表します。

<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70">
    <polygon points="48 16 16 96 96 48 0 48 80 96" style="stroke: red; stroke-width: 2; fill: aqua;"></polygon>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150">
    <polygon points="48 16 16 96 96 48 0 48 80 96" style="stroke: red; stroke-width: 2; fill: aqua;"></polygon>
</svg>

タイトルと説明

SVG画像にはタイトルや説明を付加することもできます。

SVG画像にタイトルを付加するには<svg>要素にtitle属性を指定し、説明を付加するにはdesc属性を指定します。

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" title="星" desc="五芒星です。">
    <polygon points="48 16 16 96 96 48 0 48 80 96" style="stroke: red; stroke-width: 2; fill: aqua;"></polygon>
</svg>

属性を指定する代わりに<title>要素や<desc>要素を使用することもできます。

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" >
    <title>星</title>
    <desc>五芒星です。</desc>
    <polygon points="48 16 16 96 96 48 0 48 80 96" style="stroke: red; stroke-width: 2; fill: aqua;"></polygon>
</svg>

五芒星です。

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

-svg