ちょっと時間があいちゃいましたね。

svg で、自由にベジェ曲線 を書くことのまとめです。

図形は簡単に調べることができると思いますのでここでは言及していません。


Illustrator で描くように svg で書けるのか？


を課題にしていますので、自己満足以外ではあまり役にたたないかも！

書き方は、Illustrator の「書き出し」に準じています。
説明も、Illustrator を使っている方になるべくわかりやすいようにしました。


viewBox に関しては、こちらを参照してください。

座標は、左上が基点。XY で記述。
右水平方向が Xプラス。
下垂直方向が Yプラス。

ですよ！


基本の構成

＜svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400"＞
＜defs＞
＜style＞
.cls-1 {
fill: none;
stroke: #00aa9d;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
＜/style＞
＜/defs＞
＜title＞SVG＜/title＞
＜g id="A"＞
＜path class="cls-1" d="M150,150l-99.985-1.745"/＞
＜/g＞
＜/svg＞


xmlns:xlink は、スタイルを共有するときに必要。
width・height は、固定サイズにするとき。

css は、＜style＞＜/style＞ の中に。

グラデーション・パターン・クリッピングパス などは、
＜defs＞＜/defs＞ の中。＜style＞＜/style＞ の下に書く。

＜title＞＜/title＞ ファイル名。

＜g＞＜/g＞ レイヤー・グループ。入れ子も可能。


パスの書き始めと書き終わり

＜path class="cls-1" d="パスの座標" /＞

スタイルがついていないと、黒の塗りになります。
線は指定しない限りつきません。
xml なので、閉じてね！


例

＜path class="cls-1" d="M50,100c30-30,40-30,70,0,30,30,40,30,70,0,0-40-40-60-70-60C90,40,50,70,50,100Z"/＞

M ：パスの開始
Z ：クローズドパス （オープンパスは記述しません。）


パスの種類とアルファベット記号

C・c ：独立したハンドルを持ったベジェ曲線
S・s ：連結したハンドルを持ったベジェ曲線
L・l ：ハンドルを持たない直線
H・h ：水平線
V・v ：垂直線
A・a ：円弧
Q・q ：二次曲線
T・t ：スプライン曲線

大文字は絶対座標・小文字は直前のアンカーからの相対座標です。
パスの種類は確認した限りのものです。

クローズドパスの終点は始点と同じ座標になります。
終点を記入せず Z で閉じると、直線で結ばれます。

数値の区切りは、カンマ か スペース。
改行でも区切られます。混在しても大丈夫でした。

マイナス値の前の区切りは省略可。
小数点以下の数値の場合、0 の省略可。

なので、数値を読み間違わないように！
書くときには改行すると見やすくなります。

C 等、パスのアルファベット記号の前にカンマを入れてしまうと、
一部ブラウザー（Firefox）で描画されません！

セグメントごとであれば、相対・絶対座標が混在しても大丈夫です。
複合パスの時、M 基点 を 相対座標にすることも可能です。


というのが、基本事項です。


それでは、個別に見ていきましょう！

関連記事

• svg で描いちゃう！書き方おぼえがき vol.02 【 ベジェ曲線 C・c 】
• svg で描いちゃう！書き方おぼえがき vol.01 【 基本 】
• svg で自由に描こう！vol.06 【 お魚を書く！反省会後編 viewBox をととのえる！ 】