logo

back DIARY

picture

アニメーションSVG使えるようになった

2014年11月11日

ようやくアニメーションSVGに入門しました。SVGでやりたかったのは

というもの。CSS3のアニメーションでもある程度できたんだけど、レイヤーが大きいとかなりマシンに負荷がかかってしまうのと、ただの回転だけじゃなくて好きなシェイプに沿って動かしたりしたいなと思ったため。

情報収集に使った記事など

ざっくり説明

svg要素の基本的な使い方まとめ

ここの情報がすごく詳細で明解でした。 SVGでやれることをとりあげてるからもちろんなんだけど、これ全部テキストエディタで作ったって改めて聞くとすごい

「10分でわかるSVG 応用編」サンプル

ここはほとんど説明はないけど、SVGでできそうなこととそのコードが一覧して紹介されてます。

IEとか古いブラウザ対応

SVGをIE等のブラウザ対応を考慮して使う方法まとめ(SVGのフォールバック画像など)

ブラウザ対応はこちらが明解でした。IEはSIEっていうのを使えば8以降は対応できるみたい。

SVG作り方

Illustrator Help / SVG 形式で書き出す方法 (Illustrator CC)

イラレでの書き出し方。ぼくはシェイプをイラレで用意してSVGで保存し、それをテキストエディタで開いてコピペしました。


ぐぐったらすぐに出てくる情報ですが、自分用メモとして。

シェアしてね

2014年11月11日

, , , , , , , , , ,

top TOP
自己紹介
picture
KEISUKE TSUKAYOSHI

UX Designer / UI Designer.

株式会社Fablicでフリマアプリ"FRIL"などの事業サービスのプロダクトマネジメントやデザインを担当しています。

実績など詳しくはこちら

copyrights(c) Keisuke Tsukayoshi.