画像にはラスター画像とベクター画像というのがあり、ラスター画像は「ビットマップ画像」とも言われます。
SVGはベクター画像で、画像を拡大縮小しても、画像がボヤけないという利点がある上、画像がどんなに大きくなっても画像の容量が変わらないという特典付き、SVGを学習すると、もはやこのベクター画像を極めると、イラレなどのアプリケーションは無くても良くなるんじゃね？
なんて事を考えてしまいました。
AdobeのIllustratorの.ai画像は、イラレアプリケーションでしか扱えなくて、Adobe社のCreativeCloud契約をしないといけないのがどうしてもいただけないので、そうした人の為に、SVGを使ったツールでも使えば、十分DPI作業ができると思うんですがね・・・
そして、そんなベクター画像の肝でもある"path"要素について本日は学習していきます。
基本構成とオプションについて
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M 100 100 L 300 100 L 200 300 z"
fill="red" stroke="blue" stroke-width="3" />
</svg>
pathの基本構造は、d="***"属性に、座標を書き込んでいくのですが、"[オプション] x座標 y座標"という風に記述うるのですが、最後に"z"でclosePathという意味です。
オプションは種類が多いので、以下の表にまとめてみました。
・ポイント移動
M（絶対）, m（相対） MoveTo (x,y) ポイント移動処理で実線は描かれない。
・直線描画
L（絶対）, l（相対） LineTo (無し） 任意座標までの直線を描く。
H（絶対）, h（相対） Holizon (x) 横移動の線を描く。
V（絶対）, v（相対） Vartical (y) 縦移動の線を描く。
・曲線描画（３次ベジェ） ２つのポイント（ハンドル）を基準にベジェ曲線が描かれます。
C（絶対）, c（相対） CurveTo (x1 y1 x2 y2 x y) 左右ハンドル
S（絶対）, s（相対） 略式/滑 (x2 y2 x y) 片側ハンドル
・曲線描画（2次ベジェ） １つのポイントを基準に曲線が描かれます。
Q（絶対）, q（相対） 二次ベジェ
T（絶対）, t（相対） 略式/滑 二次ベジェ
・曲線描画（楕円弧曲線）
A（絶対）, a（相対） 楕円弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)
Z または z ClosePath パスを閉じる時の記述、Zでもzでも同じ。
記述しないと、閉じられないPATHになる。
オプションの数も内容もお腹いっぱいになりますね。
確認サンプル
実際に記述してそれぞれを確認していきましょう。
直線描画
冒頭サンプルでも書いたんだけど、改めてオプション部分に注目すると、
まず、Mオプションで、描画開始位置を指定して、Lオプションで線を描いていくのがいいようです。
横ラインや縦ラインが明確な場合のみH,Vを使う感じですね。
でも、ややこしくなるので、Lだけ使う方がいいかも・・・
とりあえず、ドラゴンボールを描いてみました。
<svg width="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="200" cy="200" r="200" width="398" height="398" fill="orange" stroke="blue" stroke-width="0" />
<path d="M 200,75 L 229,161 L 319,161 L 247,215 L 273,301 L 200,250 L 127,301 L 153,215 L 81,161 L 171,161 Z" fill="yellow" stroke="none" stroke-width="3" />
</svg>
三次ベジェ
ベジェ曲線というと小難しく感じますが、ハンドルの概念を理解していれば問題ありません。
でも、ベジェハンドルを座標で記述していいくのはかなり無理がありますね。
人の脳味噌の限界を超えてしまいます。
感覚を掴みたい人は、イラレなどを使ってみるといいでしょう。
とりあえず、今回は、CオプションとSオプションを使って見ましたが、線の終点は片側ハンドルになるのでSオプションですが、それ以外はCオプションで構成できますね。
もちろん、直線オプションと組み合わせる事も可能ですが、描画図形をイメージして計算した座標とハンドルにしなければいけません。
<svg width="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M0,200 C0,100 200,100 200,200 S400,300 400,200" fill="none" stroke="red" stroke-width="4" />
</svg>
二次ベジェ
二次ベジェは、スプライン曲線と言って、任意の直線をハンドルポイントが引力のようになって、引き付けるような曲線を描くのがQオプションで、点そのものが他の点との距離で自動的に曲線が描かれるのがTオプションになります。
これもベクター曲線を扱うアプリなどで感覚に慣れないといけないですね。
<svg width="4cm" height="4cm" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M100,200 Q200,50 300,200 T500,200" fill="none" stroke="red" stroke-width="5" />
</svg>
楕円弧曲線
楕円などをコントロールできる曲線ですが、記述する内容が多く非常にややこしい命令です。
この図形を扱っていて感じたんですが、pathには全て「相対」と「絶対」という座標指定があるんですが、数値で管理するのであれば、相対を使った方が、内部座標をずらしたりする際に、非常に楽になります。
絶対座標を使ってしまうと、100ポイント左にずらしたい時に、全ての絶対座標のx値から100ポイントを引いてあげないといけません。
ベジェなどを使っていると、ハンドルの座標が変わると曲線が変わってしまう事もあるので、要注意です。
<svg width="4cm" height="4cm" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z" fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z" fill="yellow" stroke="blue" stroke-width="5" />
</svg>
参考
リファレンス
https://triple-underscore.github.io/SVG11/paths.html
ラスター画像とベクター画像の違いとは？
https://www.777logos.com/blog/vector-and-raster-graphics/
次回予告
いよいよ、グラフを作る時がきました。
今回のSVG学習の目的でもある株価チャートを作って締めくくりたいと思います。
