一発ネタ
n番煎じ。
See the Pen svg-css-perfect-understand by ririli (@ririli) on CodePen.
ついでにSVGで"HELLO"って書いてみる
See the Pen svg-hello by ririli (@ririli) on CodePen.
ちょっとだけ解説
HELLOの文字はtextタグを使うのではなくpathタグを使って書いてます。
中身はちょっと読みたくない感じですね。
とはいえ少し知るだけでなんとなく何をしているかわかるようになります。
M10,10 v60 v-30 h28 v-30 v60
実はこの一行が「H」を意味します。
同様に一行が一文字になるように改行してあります。（構文的には改行する必要なし）
「H」について詳しくみていきましょう。
なにやらアルファベットと数字の組み合わせがスペースで区切られていますね。
実はこれ、ペンをどのように動かすかを動かし方と座標の組み合わせで指示しています。
上の例だとペンに対して6回命令を出しているということですね。
もちろんアルファベットにはそれぞれ意味があります。
ここでxとyは引数にとっている数字の部分です。
| アルファベット | 意味 |
|---|---|
| Mx,y | x,yの座標にペンを下ろす |
| vy | 現在の座標から垂直方向にy分線を引く |
| hx | 現在の座標から水平方向にx分線を引く |
※小文字と大文字では意味が違ったり、この他にたくさんのコマンドがあります。今回は出番がないので省略.
詳しくはこちら
さて、命令の意味がわかったところで「H」を描画している命令群を自然言語に置き換えてみましょう。
| 命令 | 自然言語 |
|---|---|
| M10,10 | x=10,y=10の場所にペンを下ろす |
| v60 | x=10,y=10からy方向に60分線を引く |
| v-30 | x=10,y=70からy方向に-30分線を引く |
| h28 | x=10,y=40からx方向に28分線を引く |
| v-30 | x=38,y=40からy方向に-30分線を引く |
| v60 | x=38,y=10からy方向に60分線を引く |
どうでしょう、ペンの動きがイメージできましたか？
Hという文字を一筆で書こうとするとこんな感じでしょうか。
ここまでわかれば残りの「ELLO」も読み解けますね。
所感
今回は簡単のために垂直、水平方向へのコマンドしか使いませんでしたが、当然普通に文章や図形を描こうとすると曲線や斜めの線が立ちはだかります。
とはいえ、用意されているタグで表現仕切れない場合やIllustlatorなどでsvg画像を用意できない場合（そんなことあるかな...）にはpathタグで無理やりなんとかする道が残っているということは覚えておいてもいいかもしれないですね。