キャプチャ

#14 ロゴを使ってSVGアニメーションを作ってみよう【ぴよぴよコーダーの開発日記】

前回イラレで作ったロゴを利用してSVGアニメーションを作ってみようと思います。

まずはイラレでのSVGコード生成から、無駄なコードが入らないようアートボードのサイズをロゴぴったりに合わせる。

画像1

ctrl+Sで保存する際に、ファイル形式を「svg」にする

画像2

そのまま「保存」ボタンを押すとオプションが出てくるので「SVGコード」をクリックしてソースを生成する

画像3

参考:IllustratorからhtmlにSVGアイコンを表示するまでの流れ

上記の参考リンクからの抜粋ですが、svgタグからid="_レイヤー1"などの不要な属性を削除する。必要な属性は、svgであることを宣言するxmlnsとviewBoxが必要なのでこの2つだけとのこと。

さて、この生成されたsvgをhtmlに貼って、アニメーションを作ります。

codepenを貼ってみました。やってることはSVGを使ったCSSアニメーションではありますが。。今回のロゴは線が特殊だったのかsvgならではのstrokeを使った効果が効かなかった。。

作ってみるとSVGアニメーションって楽しいですね。表現の幅を広げていきたいです。

デモ(背景も派手にアニメーションさせてみた。回転させるとvwやvhが変わっちゃうところがちょいイマイチかな。。)

その他ー参考:

5分で簡単にできる!SVGアニメーションの基本

SVGのアニメーション

この記事が気に入ったらサポートをしてみませんか?