SVGをつかって磐田のゆるキャラ「しっぺい」を書いてみる

SVGをつかって磐田のゆるキャラ「しっぺい」を書いてみる

今回はSVGをつかって、磐田市のゆるキャラのしっぺいを書いてみようと思います。ベクター画像作成ソフトを使わずに挑戦するというしょうもない企画なので、生暖かく見守ってください。

しっぺいの顔を台形をベースに描く

svgの図形描画の基本は、円、楕円、四角形、多角形の4種類ですが、四角形の場合は基本的に長方形(正方形)がベースになります。したがって今回のように台形を描きたいときは多角形のほうをチョイスするのが妥当と判断しました。

(わかりやすく背景は黒にしています)

うむむ、ただの白い台形ですね…

しっぺいの頭は丸みを帯びているので、この台形に楕円を重ねて頭の丸みを表現してみましょうか。

お、何か少しだけそれっぽくなった!

多角形を使って耳を再現する

顔のなんとなくの輪郭ができたところで、次は耳の表現です。これは多角形で三角形を作ってあげればそれらしくなるのではないかと考えました。

顔の大きさの割に耳が小さい……(TдT)
何やら別の何かを創造してしまっていたようです。

いったんサイズ調整をする

ベジェ曲線を使ってないので直線ばっかりになるのは仕方ないにしても、これではしっぺいのかわいさが全く表現されていません。よって、ひとまずサイズ調整をします。

サイズ調整をしたら、なんとなくそれっぽい輪郭が完成しました。
なお、矩形を重ねてつくるということをしているので、今回はstrokはなしで行っています。

円で目・鼻を描く

ここまでできたので、円を使って目と鼻をこの輪郭に重ねていきます。これも座標設定間違えると化けものを生みそうな予感です。

目はcircle(円)を鼻はellipse(楕円)を使ってみました。少しだけしっぺいっぽさが出てきた頃合いでしょうか。

線を使って口を描く

さて、大変なのはここからです。いよいよ普通の図形で描くのがしんどくなってきました。頭の中の座標計算も大変です。
しっぺいの口は2つの弧が連なっている形になっています。ということは、円の一部にstrokeをつけることができれば、弧を表現できるということになります。

今回はstrokeの点線の幅を大きめにとることで弧を描くという荒業にチャレンジします。パスをあえて使わない!

口のもとになる楕円部分の色をかえてみました。こんな感じの楕円に弧を描くのが目的です。

だいぶ、しっぺいっぽさが出てきました。案外、工夫で何とかなりそうです。

難関の眉毛の存在を忘れてはならない

このままではただの白い犬(?)なので、しっぺいらしさを出すにはあの眉毛のようなものを追加する必要があります。
さて、ここでいよいよ標準図形だけではムリかなと思い始めた次第です。こればっかりはパスを使わざるを得ない。rect(四角形)には丸みを持たせるrxやryがありますが、polygon(多角形)にはそれが存在しないのです。

ここからがしっぺいがしっぺいになれるかの正念場なので、眉毛のようなものだけでもがんばってみます。
まずは、ここまでのしっぺいの座標の整理から。

しっぺい座標

このしっぺいに使った主な座標を明記すると、上の図のようになります。ベクター画像が書けるアプリ等を使えばこんな面倒なことを一切する必要はありません。
主要座標から、眉毛が来る位置を考えます。

しっぺい眉予想座標

図中の青で示した点が、しっぺいの眉に使う予定の座標位置です。この予想をもとに作成してから、あとで位置調整をします。

ぱっと見で、しっぺいっぽくなったのではないでしょうか!

首の輪っかを何とかする

これでもやっぱり白い犬(?)感が抜け切らないので、面倒ですがパスを使って作っています。

何となく縦に長い気もするけど、ようやくしっぺいっぽくなりました。
それではいよいよ仕上げです。

線を付け加えよう

線を付け加えると言っても、矩形の組み合わせで描いたこのしっぺいに実際に線strokeをつけたら大変なことになってしまいます。もう何が何やらの状態です。だから、ここも少し工夫をします。

輪郭はグループ化して線をつける

首の輪っかの模様や眉毛はそれ単体が一つの図形になっているので、線をつけるのはそのままstrokeの設定をするだけで良いのですが、輪郭はそうはいきません。
したがって、輪郭部分はグループ化したものに線をつけるという手法を使いました。こうすれば図形の組み合わせだということが、ぱっとわかりません。

あ、パスの閉じ忘れがいっぱいあったわ……_| ̄|○ il||li

閉じ忘れていたパスを閉じる

閉じ忘れていたパスを修正しつつ、最後の仕上げもしてしまいます。縦に長くなっているので、最終的にtransformを使って縦方向に縮小をかけます。

これで完成!

インラインSVGで一から書いてみてわかったのは、とても面倒くさいのでオススメできないということでした。おとなしくツールを使って貼り付けたほうが時間も手間もかかりません。

上が今回のしっぺいに使ったソースです。
とても疲れました。

最後まで見てくださりありがとうございます。

磐田市のゆるキャラ「しっぺい」をどうぞご贔屓に。


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top