HTML上に図形を描画できるようになりたいと思い、SVGを学びたいと思います。
前回canvasについて書いているので興味がある方は合わせて読んでみてください。
それでは学んでいきましょう。
SVGとは
書き方の前にSVGについてさらっと説明します。
SVG（エスブイジー）はScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略です。XMLベースの、2次元ベクターイメージ用の画像形式の1つです。Web画面で図形を描画する際に使われます。
画像描画ソフトで書いた図形をSVG形式で書き出すことでWeb画面上で使用することもできます。
Scalable Vectorとついているだけあってスマホなどの拡大縮小に強いです。
HTMLタグSVGで図形を書く
今回はHTML上にsvgタグを使って図形を描画する方法について書いていきます。
複雑な図形は描画ソフトを使用することが多いため簡単な図形を書ける程度を目標にしています。
SVGの描画スタイルについては別でまとめています。
SVGの書き方
図形の書き方の前に気基本的な書き方についてです。
htmlでSVGを書くときは以下のようにsvgタグを使用します。
<svg></svg>
そしてSVGの子タグに描画情報を書いていきます。
<svg>
<path d=”M0,0 L320,0 320,160 0,160″ fill=”#3F51B5″></path>
</svg>
より詳しい書き方をサンプルコードを見ながら学んでいきたいと思います。
それではさっそく図形を書いていきましょう。
線を描く（lineタグ）
まずはSVGでの線の描き方について学びます。
構文
<line x1=”数値” y1=”数値” x2=”数値” y2=”数値” />
始点のxy座標をx1, y1に終点をx2, y2に記入します。
上記の場合、線の色と幅の設定がまだなので、設定方法は以下サンプルコードで説明していきます。
サンプルコード 線を引く
<svg width=”200″ height=”100″>
<line x1=”0″ y1=”0″ x2=”200″ y2=”100″ stroke=”#1600FC” stroke-width=”4″ />
</svg>
線の色と幅は以下のように設定できます。
stroke=”文字色” stroke-width=”線幅（数値）”
strokeに文字の色情報、stroke-widthに線幅の数値を記入します。
lineに限らず他の描画でも設定できます。
四角形を描画する (rectタグ)
四角形は比較的簡単に描画できます。
構文
<rect X=”値” Y=”値” width=”値” height=”値” />
四角形の左上の点のXY座標とwidth(幅)、height(高さ)を入力するだけです。
XY座標は省略可能で、cssでよく使うwidthとheightだけで四角形が作れるので比較的簡単ですね。
サンプルコード 四角形を描画する
<svg width=”200″ height=”150″>
<rect X=”10″ Y=”25″ width=”180″ height=”100″ fill=”#1600FC” />
</svg>
fillは埋めるという意味で線の内側を特定の色で塗りつぶす際に使用します。
（fillを書かない場合は黒で描画されます。）
サンプルコード 四角形＋線
ついでに四角形 + 線も描画してみましょう。
<svg width=”200″ height=”150″>
<rect X=”10″ Y=”25″ width=”180″ height=”100″ fill=”#BCE1DF” stroke=”#1600FC” stroke-width=”2″ />
</svg>
サンプルコード 角丸四角形
少し難易度を上げて角丸四角形を作成してみましょう。
rectのオプションでもあるrx、ryを使用します。
<svg width=”200″ height=”150″>
<rect X=”10″ Y=”25″ rx=”10″ ry=”10″ width=”180″ height=”100″ fill=”#BCE1DF” stroke=”#1600FC” stroke-width=”2″ />
</svg>
rectタグの中にrx=”10″ ry=”10″が追加されています。
よほどこだわった角丸を作成しようと思わない限りrx, ryには同じ数値をいれます。
rxだけでも機能することはありますがrxとryは依存関係にあるらしくよほどのことがない限り省略しない方がいいでしょう。
（角丸にならないことがあるので）
またrxを四角形の幅の半分以上の値を入力した場合、半分とみなされます。
数を変えてみると仕組みも分かりやすいので一度変更して遊んでみると理解が深まると思います。
rはradius/半径のrです。
丸を描画する (circleタグ)
丸の描画方法です。
構文
<circle cx=”値” cy=”値” r=”半径” />
cx, cyにはxy座標、半径には半径のサイズを書きます。
サンプルコード 円を描く
<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”50″ fill=”#1600FC” />
</svg>
中身にfillで色を付けています。簡単ですね。
楕円を描く (ellipseタグ)
円に比べると少しややこしい。
構文
<ellipse cx=”値” cy=”値” rx=”x軸の半径” ry=”Y軸の半径” />
cx, cyにはxy座標、楕円のためrx, ryそれぞれに半径を指定できます。
サンプルコード 楕円を描く
<svg width=”100″ height=”60″>
<ellipse cx=”50″ cy=”30″ rx=”40″ ry=”28″
style=”fill:#cccccc;stroke:#1600FC;stroke-width:2″ />
</svg>
fillやstrokeはstyleで指定することもできます。
多角形を描く (polygonタグ)
多角形は角が多いとより複雑になっていきます。
構文
<polygon points=”x1,y1 x2,y2 x3,y3…..” />
点の数だけxy座標を入力します。
サンプルコード 三角形を描く
<svg height=”100″ width=”100″>
<polygon points=”50,0 100,100 0,100″ style=”fill:#cccccc;stroke:#1600FC;stroke-width:1″ />
</svg>
サンプルコード星形
<svg width=”100″ height=”100″>
<polygon points=”50,0 90,80 10,25 90,25 10,80″
style=”fill:#cccccc;fill-rule:nonzero;” />
</svg>
綺麗な星形描くの難しい。
fill-rule:nonzero;で塗りつぶし方法を指定しています。nonzeroはデフォルト値。
fill-ruleは２つのみなのでついでにもうひとつ。
<svg width=”100″ height=”100″>
<polygon points=”50,0 80,80 10,25 80,25 10,80″
style=”fill:#cccccc;fill-rule:evenodd;” />
</svg>
evenoddを使うと上記のようになります。うまく言葉で説明できないので、気になる方はググってみてください。
文字を描く (textタグ)
textタグで文字を描くことができます。
構文
<text x=”値” y=”値”>文字</text>
x,yは座標、textタグの間に表示させたい文字を記入します。
サンプルコード 文字を描く
<svg width=”300″ height=”100″>
<text x=”0″ y=”15″ font-size=”30″ font-family=”Helvetica” font-weight=”bold” fill=”#cccccc” stroke=”#1600FC” stroke-width=”2″ >Programmer Life</text>
</svg>
(フォントが思い浮かばなさすぎて、font-familyできちんと変わっているのか未確認です。)
折れ線を描く (polylineタグ)
折れ線はpolylineタグを使って描画します。
構文
<polyline points=”x1, y1 x2, y2 x3, y3…..” />
xyの点座標を数分設定するだけです。
<polyline>の書き方は<polygon>と似ていてわかりやすいですね。
サンプルコード 折れ線
<svg width=”100″ height=”80″>
<polyline points=”10, 10 50, 10 50, 50 90, 50 90, 90″ stroke=”#1600FC” stroke-width=”4″ fill=”none” />
</svg>
fill=”none”で塗りつぶしを消しています。
ここで紹介したタグは一部に過ぎないので興味があるかたは一覧を見て実験してみると楽しいかもしれません。
https://www.w3schools.com/graphics/svg_reference.asp
おわり
svgにはもう一つ重要なタグにpathがありますが長くなったので、pathは別でまとめています。
画面で使用するちょっとした図形はSVGで作成したら作業効率も上がりそうですね。
png透明で書き出すの忘れたりの心配もないですし。書き出しサイズを気にしなくていいのは便利ですね。
