アニメーションSVG使えるようになった
2014年11月11日
ようやくアニメーションSVGに入門しました。SVGでやりたかったのは
- 円弧のパス
- オブジェクトがそれに沿って動き回る
というもの。CSS3のアニメーションでもある程度できたんだけど、レイヤーが大きいとかなりマシンに負荷がかかってしまうのと、ただの回転だけじゃなくて好きなシェイプに沿って動かしたりしたいなと思ったため。
情報収集に使った記事など
ざっくり説明
ここの情報がすごく詳細で明解でした。 SVGでやれることをとりあげてるからもちろんなんだけど、これ全部テキストエディタで作ったって改めて聞くとすごい
ここはほとんど説明はないけど、SVGでできそうなこととそのコードが一覧して紹介されてます。
IEとか古いブラウザ対応
SVGをIE等のブラウザ対応を考慮して使う方法まとめ(SVGのフォールバック画像など)
ブラウザ対応はこちらが明解でした。IEはSIEっていうのを使えば8以降は対応できるみたい。
SVG作り方
Illustrator Help / SVG 形式で書き出す方法 (Illustrator CC)
イラレでの書き出し方。ぼくはシェイプをイラレで用意してSVGで保存し、それをテキストエディタで開いてコピペしました。
ぐぐったらすぐに出てくる情報ですが、自分用メモとして。