totorajの開発日記

僕がなんかメモる

SVGについてのメモ

現在制作しているプレイヤーのボタンを作るときにSVGについて調べたので忘れそうなことをメモしておく。

文法についてのメモ

SVGのpath要素のd属性のはなし

Mコマンドの直後のLコマンドは省略できる。

連続して同じコマンドを使う場合もコマンドは省略できる。

<!-- 下記は同じ -->
<path d="M 0,0 L 10,0 L 10,10" />
<path d="M 0,0 10,0 10,10" />

区切りの,(コンマ)と(スペース)はどちらでもいい

コマンドの直後は区切る必要はない

<!-- 下記は同じ -->
<path d="M 0,0 10,10" />
<path d="M0 0 10 10" />

僕は見やすさを考慮して座標のxとyはコンマで区切って、その他はスペースにしています。

SVGをアニメーションさせる

ライブラリを使うのが手っ取り早い。

Snap.svgというのがよさげ。

Adobeが開発しているオープンソース(Apache2 license)のライブラリ。

めっちゃしっかり作られている。

アニメーションのコツ

pathのd属性を指定したd属性までアニメーションさせるときに少し癖がある。

きれいに動くpathを書くコツ?みたいなのがあるので少しメモしておく。

Bad

f:id:totorachan:20160429153436g:plain

Mコマンドとzコマンドの数がそろっていないので変なアニメーションになる。

<!-- Before -->
<path d="M 3,2 13,8 3,14 z" />

<!-- After -->
<path d="M 3,2 6.4,2 6.4,14 3,14 z
         M 9.6,2 13,2 13,14 9.6,14 z" />

Good

f:id:totorachan:20160429153513g:plain

BeforeのMコマンドとzコマンドの数をAfterに合わせるために分割した。

さらにMコマンドの座標を1つ余分に追加してAfterと合わせている。

見た目が変わらないようにコマンドと座標を合わせるのは結構難しいけど、これだときれいなアニメーションになる。

<!-- Before -->
<path d="M 3,2 8,5 8,11 3,14 z
         M 8,5 13,8 13,8 8,11 z" />

<!-- After -->
<path d="M 3,2 6.4,2 6.4,14 3,14 z
         M 9.6,2 13,2 13,14 9.6,14 z" />

おわりに

なにもツールを使わずにSVG手書きしたのは初めてだったけど無駄がない構造にできるのでオススメ。

ただ、シンプルなアイコンだと普通に書けるけど複雑なものだと少し厳しいものがある。