SVG画像を手書きする (Pixiv Fanbox)

SVGという画像形式があります。最近はアイコンなどの画像によく使われているのでホームぺジを作っている人なんかは知っている人もいるでしょう。この中身はベクター画像を表示するタグの書かれたXMLで記述されているので実はテキストエディタで編集することができます。四角や丸といった単純な図形を描画するのであれば、座標を手打ちすることで意外と簡単に図形が描けてしまうんですよ！

それでお天気のアイコンをいくつか作ってみました。この雲の形は単純な角丸四角形と丸とを組み合わせただけでできてます、このコードをそのままテキストに保存して.svgにするだけで表示できます。は描画範囲を指定しているので、キャンバスの大きさなようなものですね、横80縦60の空間です。数値はそれに対する相対的な幅や座標の数値で、が四角でが丸の描写を指示しています。はグループでこれでひとまとめの形としてます。

お次は太陽です。少し長く見えますがこれも単純で中央の円と△が一つだけ書いてあって、あとは複製した△を回転させて表示する、という指示だけ書いてあります。多角形はで書くことができるんで、三角、四角、五角形とかも星型のようなものも座標を打っていくと書けますここではpointsにx,y座標が空白で区切って3点ありますね。そしてでコピーして同じものを再描画しているのです。あとはtransformで45度ずつ回してやるだけなので指定も簡単です。

もしこれをグラフィックソフトで書いたなら一つずつ細かく座標をずらしたパスが出力されてしまうでしょう、手書きならではの優位性もあるわけです。

最後に図形の組み合わせで雪だるまを。

単純な図形だけなので手書きでも思ったより楽です、グラデーションもつけてみました。パラメータはネットで調べると分かりますがというところでグラデーションを定義しての楕円で塗りにグラデを適用しています。

手書きの何がいいのかというとパスの構造がわかるので中身をスクリプトで操作することができるようになるところです。例えば太陽の周りの三角だけをアニメーションで回してやったりとか（天気予報では動きまくるとうざそうだからやりませんが）状況に応じて色味を変化させてやったりだとかできるようになります。開発者じゃないと可能性をいまいち感じにくいかもしれませんけどね……

また図形の再利用でリソースをぐっと減らせるので晴れのち曇りとか晴れ時々曇りとかのバリエーションもつくりやすくなります。ただ、気象庁の天気アイコンは40種類以上あるのでどのみち大変な作業ですけど！

最後にコードも載せておきますのでいじって確認してみたい人がいたらテキストに.svgの拡張子で保存してFirefoxにでも放り込んでください。

大きさを指定してないのででかでかと表示されると思いますが！

--曇り--

--太陽--

--雪だるま--