SVGのpathで画の書き方 【思ったより簡単】

SVGのpathで画の書き方【思ったより簡単】

• サイトにちょっとした画を挿入できたら良いのに。
• このサイトの小さい画像、保存できない、画像じゃなくsvg？？？
• 簡単にsvgで画を描けたらいいのに。

このような悩みについて、解説します。

私は２０２０年２月からHTMLとCSSの勉強を初めて（本格的に始めたのは５月）、間も無く上記の2番目の壁にあたりました。模写をしている最中に小さい画像がダウンロードできず、困ってデベロッパーツールでソースコードを見ると「<svg>」の文字があり、「？？？」となってしまいました。
この状態から調査した内容がこの記事になりますので、初心者の方に寄り添った内容になっていると思います。

まず、私が調査に使用したサイトは、
W3C Recomendation → SVG1.1 8章
MDN web docs → SVG: Scalable Vector Graphics
の２つです。
他サイトもググって見たのですが、初心者にはわかりにくく、どうせならと思い時間をかけて２つのサイトを読みながら勉強しました。

こんなことが出来るようになります

この記事を読み終わる頃には、以下のような画が描けるようになります。

実際のコード

最終的に書くHTMLの内容は以下になります。

ーーーーーーーーーーーーーーーーーーー
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

<path d="M 23 19 a 2 2 0 0 1 -2 2 h -18 a 2 2 0 0 1 -2 -2 v -11 a 2 2 0 0 1 2 -2 h 4 l 2 -3 h 6 l 2 3 h 4 a 2 2 0 0 1 2 2 z"> </path>

<circle cx="12" cy="12" r="4"></circle>
</svg>
ーーーーーーーーーーーーーーーーーーー

はい、全くわかりませんね。
一番わからないのは水色の<path>の部分かと思います。
少なくとも私は全くわかりませんでした。なんの呪文かと思ったくらいです。
（この数字が各点となり、その点をつなぐと画になります。）
ここは、円の周りの線を書いている部分になります。
線を書く方法は他にもあるのですが、今回はこの<path> を使用します。

それでは、次にいきましょう。

描写する場所について説明します

画を描写する前に、描写する場所について説明します。
画を描くには紙が必要で、そこに数字で指定することになり、今度は座標が必要になります。
簡単に言うと方眼紙に点をのせて、それをつなげて画を完成させます。
方眼紙のサイズは<svg>タグの中にある「viewBox="0 0 24 24"」で決めます。
詳細は割愛しますが、「24 24」と書いてあるところがサイズになります。左の24が横幅、右の24が縦幅を表します。
言葉では伝わり難い箇所だと思いますので説明画像をのせます。
説明画像では、横5、縦5で書いてます。24にすると細か過ぎて見え難いので。

次から実際に画を描いていきますが、座標の概念がわからなくなった場合はここに戻ってきてください。

開始位置を描いてみましょう

開始の点です。描きながら説明していきます。

pathの部分を以下のように書き換えましょう。これが開始の点になります。
<path d="M 23 19 z"></path>

最初の「M」が開始位置を表すものです。大文字で記載しましょう。小文字でも大丈夫なのですが。ここは大文字で。
絶対座標（大文字）と相対座標（小文字）の差になります。
絶対座標と相対座標をよく知りたいという方は、

座標、絶対と相対の考え方（近日公開予定）

で説明します。

M 23 19 の数字の部分を説明します。
この数字が座標になります。
xの位置が23で、yの位置が19になります。先に説明した描写する場所を24マス×24マスの方眼紙にしてください。
実際に方眼紙に点を置いて見るとわかり易いです。

次にいきましょう。下側に弧を描くようにします。

円弧を描いてみましょう

pathの部分を以下のように書き換えましょう。
<path d="M 23 19 a 2 2 0 0 1 - 2 2"></path>
青字の部分が追加になったところです。また「z」を削除しています。zは終了位置と開始位置を上手につないでくれるものです。後ほど説明しますので、ここでは削除して進めます。
何か下側にウニっとなりましたね。
この部分が理解できると、９割ほど終わりだと思います。
私はこの部分がわからなく一日悩んでいました。

では説明をします。

「a 2 2 0 0 1 -2 2」

「a」は小文字（相対移動）で記載します。楕円弧曲線を描くものです。円弧を描けると覚えておけばとりあえず困りません。

「a 2 2 0 0 1 -2 2」
先に後ろの二つの数字の説明をします。
これは開始位置【座標(23,19)】から左に-2、下に2移動したところがゴールとなることを示しています。

画像で説明します。
画像の右下が原点から見て一番遠い座標（24,24）になります。※原点側の方眼は割愛しています。

なんとなくイメージできたかと思います。

次は
「a 2 2 0 0 1 -2 2」
2番目と３番目の数字に対する説明です。
この二つの数字は、開始位置の点と到着位置の点を結ぶ楕円（今回は円）の半径になります。
2番目の「2」はx方向の半径、3番目の「2」はy方向の半径になります。
これもわかり難いと思うので画像で説明します。

開始位置の緑と、終了位置の赤を通り、xとyの半径がそれぞれ２の円を描くとこのようになります。
円が二つ作られることがわかると思います。
この中からどの弧を選ぶのかと言うところがこの後に続く数字になります。

まずは一つ目の「0」です。
「a 2 2 0 0 1 -2 2」
この「0」は楕円の角度を表しており、今回は楕円ではなく円となりますので割愛します。

次にいきます。

「a 2 2 0 0 1 -2 2」
２番目の「0」は、大きい弧「0」を選ぶか、小さ弧「1」を選ぶか選択ができます。分かりにくいと思いますので、これも画像で説明します。

どうでしょうか、どちらの弧を選択するかわかりましたでしょうか。
これでもまだ、弧を一つに選べません。
こここで最後の数字の出番です。

「a 2 2 0 0 1 -2 2」
この数字は、
開始位置から時計回りの弧が「1」
開始位置から反時計回りの弧が「0」
となります。
これもわかりにくいので画像で説明します。

これでやっと一つの弧に絞れます。
開始位置から弧を描くような線を描くのに
「a 2 2 0 0 1 -2 2」
「①楕円弧指定　②x半径　③y半径　④楕円角度　⑤円弧サイズ選択　⑥円弧時計周り選択　⑦x終了位置　⑧y終了位置」
１つの文字と、７つの数字が必要なことがわかってもらえたかと思いますが、どうでしょうか。
結局どの弧を選択したかと言うと

この弧を選んだことになり、

このような形になったことがわかるかと思います。
半径の部分や、この選択の部分を変更すると、尖った曲線など描けるかと思います。

水平線を描いてみましょう

pathの部分を以下のように書き換えましょう。
<path d="M 23 19 a 2 2 0 0 1 - 2 2 h -18"></path>
青字の部分が追加になったところです。
円弧の終了位置から左に線が引かれています。

「h」は水平方向にと言う意味です。horizontalの頭文字です。
小文字ですので、円弧の終了位置を基準に線を引くことになります。

「-18」は、円弧の終了位置から水平方向に、-18、つまり左方向に18まで線を引けと言う意味です。
念のため画像で説明します。

どうでしょうか。円弧の部分に比べるとこちらの方がわかり易いかと思います。
では次にいきます。

円弧を描きましょう２

pathの部分を以下のように書き換えましょう。
<path d="M 23 19 a 2 2 0 0 1 - 2 2 h -18 a 2 2 0 0 1 -2 -2"></path>
青字の部分が追加になったところです。
前回の円弧との差は、最後の終了座標のところだけです。
説明は割愛します。※思い出したい方はこちらからどうぞ。

垂直線を描いてみましょう

pathの部分を以下のように書き換えましょう。
<path d="M 23 19 a 2 2 0 0 1 - 2 2 h -18 a 2 2 0 0 1 -2 -2 v -11"></path>
青字の部分が追加になったところです。円弧の終了位置から上側に線が引かれています。

「v」は垂直と言う意味で、verticalの頭文字です。

円弧の終了位置から、「-11」ですので、上側の方向に11まで線を引けっと言うことになります。
では次にいきましょう。

円弧と水平線を描きましょう

pathの部分を以下のように書き換えましょう。
<path d="M 23 19 a 2 2 0 0 1 - 2 2 h -18 a 2 2 0 0 1 -2 -2 v -11 a 2 2 0 0 1 2 -2 h 4"></path>
青字の部分が追加になったところです。円弧を描き、その後右方向に水平線を引いてます。

では、次にいきましょう。

斜めの線を描きましょう

pathの部分を以下のように書き換えましょう。
<path d="M 23 19 a 2 2 0 0 1 - 2 2 h -18 a 2 2 0 0 1 -2 -2 v -11 a 2 2 0 0 1 2 -2 h 4 l 2 -3"></path>
青字の部分が追加になったところです。

  「l 2 -3」の説明をします。
「l」、これは小文字のエルです。lineto命令と言う名前です。
小文字で相対移動ですので、水平線の終了位置から、x方向に2、y方向に-3の位置に線を引くと言うことになります。
画像で説明します。

どうでしょうか。
今までは、水平方向（h）や垂直方向（v）に直線を引いていましたが、斜めの方向に線が引けるようになりました。
では、次にいきましょう。

水平線、斜め線、水平線、円弧を描きましょう

pathの部分を以下のように書き換えましょう。
<path d="M 23 19 a 2 2 0 0 1 - 2 2 h -18 a 2 2 0 0 1 -2 -2 v -11 a 2 2 0 0 1 2 -2 h 4 l 2 -3 h 6 l 2 3 h 4 a 2 2 0 0 1 2 2"></path>
青字の部分が追加になったところです。

ここまで来ると、今までの繰り返しになりますので、徐々に慣れてこられたのではないでしょうか。
次が、外枠の最後になります。

開始点とつなげよう

pathの部分を以下のように書き換えましょう。
<path d="M 23 19 a 2 2 0 0 1 - 2 2 h -18 a 2 2 0 0 1 -2 -2 v -11 a 2 2 0 0 1 2 -2 h 4 l 2 -3 h 6 l 2 3 h 4 a 2 2 0 0 1 2 2 z"></path>
青字の部分が追加になったところです。

最後はv＊＊と記載する必要はありません。「z」を付け加えるだけです。

これはclosepathと呼ばれ、今まで描いて来た線を閉じるためのものです。
最後の円弧を描いた終了位置から、今回の画を描き始めた開始位置をつなぐものです。
これで外枠が終わりました。

では、次にいきましょう。

円を描きましょう

</path>の次に以下を書き加えましょう。
<circle cx="12" cy="12" r="4"></circle>
青字の部分が追加になったところです。

では説明をします。

「cx」と「cy」は円の中心座標です。
描写する方眼紙のサイズは24×24ですので、中心に円を描くことになります。

「r」は円の半径です。
方眼紙の座標（12,12）を中心として、半径4の円を描けと言うことになります。

さて、ここまでお疲れ様でした。
描写のやり方が皆さんに伝わっていると良いのですが、いかがだったでしょうか。

svgタグの属性の説明

最後にsvgタグの中にある属性について説明します。
以下の３つについてです。

• fill="none"
• stroke="black"
• stroke-width="2"

[fill] 描写した線で囲まれた中の色を指定します。
例えば"pink"にすると以下のようになります。

[stroke]描写した線の色を指定します。
例えば"blue"にすると以下のようになります。

[stroke-width]描写した線の太さを指定します。
例えば"3"と指定すると以下のようになります。

以上で、

「SVGのpathで画の書き方【思ったより簡単】」と題した記事は終了になりまが、
みなさまのお役に立てると幸いです。
ちなみに、自身の備忘録としての役割も果たしています。

それでは、今回は以上となります。
最後までお読みいただきありがとうございました。