HTMLファイルにSVGで四角形の図形を表示する勉強

HTMLファイルにSVGで四角形の図形を表示する勉強

HTMLファイルにSVGで四角形の図形を表示する勉強をしたときのことを覚え書き程度に記事にしておくことに。

SVGについての知識がまったくない状態で勉強を始めたのですが、作りやすそうな図形「四角形」を勉強材料にすることで、図形を作成するときに必要なsvg要素やpathタグ、そしてd属性の記述方法が覚えられるようになってきました。

SVGで四角形を表示できるようにしてからは、以下のような不等辺四角形にするのが目標でした。台形というほうが正しいのかもです。

 

 

とにかくSVGで図形を表示できるようになろうということだけを目標に、まずは四角形を作って勉強ししてみようという内容です。

これから勉強するSVG(Scalable Vector Graphics)はXMLをベースにした2次元ベクターグラフィックス記述言語です。

 

HTMLファイルにsvg要素を記述

 

はじめにsvg.htmlのようにHTMLファイルを作成してbody要素にsvg開始タグと終了タグを省略せずに記述します。これによりsvg要素はSVG関連の要素を格納するためのルート要素になります。

 

<svg></svg>

 

svgファイルにする場合はファイル拡張子を「.svg」で作成します。

 

<?xml version="1.0"?> <!--XML宣言は省略可能-->
<svg xmlns="http://www.w3.org/2000/svg"></svg> <!--SVG名前空間宣言は必須-->

 

svgファイル内ではxmlsでSVG名前空間宣言(必須)を記述します。XML宣言は省略可能です。

今回のようにHTMLファイルにインラインで直接svg要素を記述して埋め込む場合は、SVG名前空間宣言はHTML5ではブラウザー側が自動で解釈してくれるので省略可能です。

svgの開始タグにはwidth属性とheight属性を記述することができ、ビューポートの幅と高さを指定できます。ビューポートは画面上での表示領域を表します。

 

<svg width="400" height="300"></svg>

 

width属性値とheight属性値は単位なしの数値のみを指定します。数値のみで指定することでsvg要素の縦横サイズはHTMLファイルをブラウザに表示したときに、px単位のボックスになります。

 

 

svg要素に記述したwidth属性とheight属性の縦横サイズは検証ツールで視覚的に確認できます。もしくはHTMLファイルに記述したsvg要素にCSSで背景色を付けても確認しやすいかと思います。

 

Advertisement

 

svg要素に記述するwidthとheightを数値のみにしたとき単位がpxなので、HTMLファイルに埋め込まれたsvg要素が形成するボックスの幅と高さは固定されます。

そのためSVGで四角形などの図形をレスポンシブにする場合には、width属性とheight属性の記述は省略をしてviewBox属性をsvg要素に記述します。

 

<svg viewBox="0 0 400 300"></svg>

 

viewBoxはSVGで表示する範囲を指定します。属性値に左からx座標の最小値,y座標の最小値,幅,高さの順番に単位を付けずに、半角スペースまたはコンマで区切って指定します。

viewBoxの属性値で指定した座標でSVGのビューボックス(表示領域)の位置が移動します。

 

<svg width="400" height="300" viewBox="0 0 400 300">
    <circle cx="0" cy="0" r="100" fill="deeppink" />
</svg>

 

例えばsvg要素とビューボックスをwidth=”400″ height=”300″を指定した横400px縦300pxで、ビューボックスの位置は属性値でx座標0とy座標0にして左上隅にしておきます。

そしてsvg要素内部にcircleを記述してピンク背景の円を描画。この円の座標もcx=”0″ cy=”0″にすると左上隅に配置され円の1/4が表示されます。

 

 

viewBoxの属性値で0 0の座標を40 40の座標に変更すると円は小さくなります

 

<svg width="400" height="300" viewBox="40 40 400 300">
    <circle cx="0" cy="0" r="100" fill="deeppink" />
</svg>

 

 

ビューボックが左上、座標(0 0)から、右に40下に40の座標まで移動するので円は小さくなります。

勉強しているとき最初は円が移動していると思ってしまいましたが、そうではなくビューボックスが左上隅からx40 y40の座標に移動しているので、左上にある円の隠れてしまう部分が増えているということになります。

svg要素に記述するviewBoxの属性値でx y座標に続く2つの数値はビューボックスの幅と高さの指定です。

 

<svg width="400" height="300" viewBox="40 40 400 300">
    <circle cx="0" cy="0" r="100" fill="deeppink" />
</svg>

 

svg要素で最初に記述したwidthとheightがsvgのビューポート領域なのに対して、viewBox属性値のwidthとheightは、svg要素ビューポート内でSVGの表示範囲の幅と高さを指定します。

上記のsvg要素の記述ではwidthが400でheightが300、viewBoxもwidth400でheight300ですが、ビューボックスの高さを300から30にすると理解に苦しみだします。

 

 

ビューボックスの高さを300から30までかなり小さくしているので、もっと円が潰れるイメージをしたのですが、思っていたほど潰れないのは、preserveAspectRatio=”xMidYMid meet”がデフォルトで機能しているためで、高さか幅を合わせるように拡大縮小されたりするためのようです。

 

xMidYMidが均等な拡縮を強制してxyのそれぞれ真ん中に配置。meetが縦横比を維持してveiwBoxを可能なかぎり大きく配置。

 

preserveAspectRatio属性値にnoneを指定すると画面上で見える範囲でSVGの円は、もはや円ではなくなります。

 

<svg width="400" height="300" viewBox="40 40 400 30" preserveAspectRatio="none">
    <circle cx="0" cy="0" r="100" fill="deeppink" />
</svg>

 

 

svg要素を記述するときのviewBox素直に難しいです。いろいろ調べたりもしてみましたが、viewBoxで指定する幅や高さがwidth, heightの指定と違うときは、 高さまたは幅をあわせるように拡大縮小されるということくらいしか理解できませんでした。

SVGで四角形の図形を表示する勉強段階では、ビューポートのwidth、heightとビューボックスのwidth、heightは統一するようにしておこう。という逃げ道を作り、SVGで四角形作りに進みたいと思います。

 

SVGで四角形の図形を表示してみる

 

前述したwidth、heigthとviewBoxを指定したsvg要素をhtmlファイルに記述して、四角形の図形をpahtで表示する勉強をしてみることにします。

 

<svg width="400" height="300" viewBox="20 20 400 300">
    <path d="M30,30 L200,30 L200,200 L30,200 Z" />
</svg>

 

HTMLファイルに記述したsvg要素内部にpathタグを記述します。pathタグにはd属性を記述してd属性値に始点(M)、直線を描くコマンド(L)、パスを閉じるコマンド(Z)を記述していくことで四角形の図形が出来上がります。

上に記述したsvg要素のpathタグのd属性値に記述したコマンドでは四角形が次のように表示されます。

 

 

SVGで四角形の図形を表示するために使用するd属性でのコマンドはMとL、そしてZの3つです。

 

  • M m 始点の座標x yを指定
  • L l 直線の移動先の座標x yを指定
  • Z z パスを閉じる、終点から始点までの直線を描画

 

Advertisement

 

コマンドの記述は大文字と小文字が区別されます。

大文字のコマンドは絶対座標、 小文字のコマンドは相対座標です。

SVGで四角形だけには限りませんが、表示する図形にはカラー付けをしたいです。図形へのカラー付けは、pathタグにfill属性、stroke属性、stroke-widht属性を記述します。

 

<svg width="400" height="300" viewBox="0 0 400 300">
    <path d="M30,30 L200,30 L200,200 L30,200 Z" fill="#333" stroke="deeppink" stroke-width="5" />
</svg>

 

 

fill属性は属性値でカラーコードを指定すると、四角形の内部に指定したカラーが適用できます。

stroke属性は属性値でカラーコードを指定すると、四角形の枠に指定したカラーが適用できます。

 

 

四角形の枠だけに色を塗りたいだけの場合は、fill属性値をnoneで指定します。transparentの指定でも枠だけの色にできます。

 

pathタグd属性で点を繋げて四角形にするコツを掴む

 

HTMLファイルにsvg要素を記述してpathタグのd属性で実際に四角形を作ろうと勉強を進めていると、コマンドの使い方がまだ勉強不足らしくて、思い描いたような四角形を描画できるようになるまで時間がかかりました。

コツが掴めたのはpathタグのd属性で点を繋げながら四角形を反復作成してからです。

 

<svg width="400" height="300" style="background:#333">

    <!--pathタグのd属性で4つの点を四角につなぐ-->

    <!-- 4点 -->
    <circle cx="20" cy="20" r="10" fill="deeppink"/>
    <circle cx="380" cy="20" r="10" fill="deeppink"/>
    <circle cx="380" cy="280" r="10" fill="deeppink"/>
    <circle cx="20" cy="280" r="10" fill="deeppink"/>

</svg>
Advertisement

HTMLファイルにsvg要素を記述して、あらかじめSVGの描画領域に4つのcircleタグで左上、右上、右下、左下に4つの点を表示させておきます。

 

 

表示した4点の左上をpathの始点として、時計回りにコマンドMとLとZのみをd属性値に使用して四角形を組み立てて表示させます。

 

 

一度d属性値のコマンドで点にあわせて四角形が表示できたら、xとy座標の数値を変えまくり、四角形の辺の移動の変化を見ていくと、座標についてのコツが視覚的に掴みやすくなります。一個目の四角形の内側に、さらに四角形をひたすら中心に向かって反復描画するのでも良いかと思います。

 

 

ちなみに私がSVGで四角形の図形を表示する勉強をしたときは、pathタグのd属性で点を繋げて四角形を作成する反復練習を6回でうんざりしてしまい投げ出しました。しかし四角形の座標をイジりまくってだいぶコツを掴むことはできました。

 

svgのd属性で不等辺四角形を表示

 

HTMLファイル内でSVGを使用して四角形を表示できるようにd属性の記述方法を勉強をするだけでも、四角形を元にちょっと応用した図形のデザインができるようになります。

私がHTMLファイルにSVGで四角形の図形を表示する勉強に選んだのは、SVGで不等辺四角形を作成して表示したいのが目的でした。

svgのd属性で不等辺四角形の作成にチャレンジしてみた紹介っぽくなりますが、作成して表示させたかった不等辺四角形は以下です。

 

 

もはや台形?上の画像のように不等辺の四角形を表示したい場合のsvg要素の記述は次のように書きました。

 

<svg width="300" height="200">
    <path stroke-width="3" stroke="deeppink" fill="#333"
    d="
    M 20 40
    L 280 70
    L 290 150
    L 5 150
    z"/>
</svg>

 

HTMLファイルにsvgのpathタグd属性でx座標とy座標で辺に角度を付けて不等辺の四角形を組み立て表示します。

またSVG初心者なりに不等辺四角形の図形を重ねるやり方にもチャレンジです。

 

 

<svg width="300" height="200">
    <path stroke-width="2" stroke="yellow" fill="#333"
    d="
    M 40 20
    L 280 70
    L 200 150
    L 20 150
    z"/>
    <path stroke-width="3" stroke="deeppink" fill="#333"
    d="
    M 20 40
    L 280 70
    L 290 150
    L 5 150
    z"/>
</svg>

 

SVGはファイル内で先に記述した図形を後ろに描画して、その次に記述したものが上に重なり描画されます。

 

polygonで四角形の辺を不揃いにして表示

 

svgのd属性で不等辺四角形を表示させる記述方法はsvgの勉強になるので良いのですが、polygonタグを使用しても四角形の辺を不揃いにして表示することができます。

polygonは多角形を描画するために使用できます。

 

<svg viewBox="0 0 1000 400">
    <polygon points="50,80 0,290 620,290 550,40" stroke="#F44D61" fill="#333" stroke-width="5">
</svg>

 

polygonタグにpoints属性を記述して、属性値にx座標とy座標をカンマで区切って指定し、xとyの座標セットを半角スペースで区切り、図形を描画していきます。最後の点は最初の点と結ばれます。

SVGについて、まだまだ未熟すぎるのでSVGで四角形に限らず、いろいろな図形にチャレンジして勉強を続けていこうと安易に心に誓った今回の記事でした。

HTMLカテゴリの最新記事