この記事では、SVG Artistaを使ってSVGロゴ画像をアニメーションさせる方法を紹介します。
SVGファイルを扱うこと自体初めてだったので、SVGファイルについても簡単にまとめています。
とりあえず、この記事で紹介するSVGアニメーションのデモです。
SVGファイルとは
SVGとは、Scalable Vector Graphicsの略でベクトル形式の画像フォーマットです。
pngやjpegはビットマップデータのラスタ形式の画像フォーマット
他の画像フォーマットとことなり、数値データを演算することによって画像を再現しています。
SVGファイルは、
- 拡大・縮小しても画像が荒くならない
- CSSやJavaScriptでのアニメーションやエフェクトと相性が良い
- ファイルサイズは小さい
などの特徴をもっているため、ホームページのロゴに使われることが多い画像フォーマットです。
ここではSVGファイルの詳細は解説しないので、詳しいことを知りたい方はググってください。
SVGファイルの特徴だけ頭に入れておけばよいと思います。
SVG Artistaを使ったSVGロゴ画像のアニメーション
SVGファイルを０から自力でアニメーションさせることは難しいと思い、まずはどんな感じで動くのか、どんなコードで動かすのか知るために、SVG Artista というSVG自動生成ツールで作ってみました。
『SVG Artista』でSVGファイルをアップロードする
デモのような線と塗のアニメーションを実装するためには、あらかじめillustratorで画像や文字をアウトライン化しておき、線を付けておく必要があります。
作成した画像をSVG形式で保存し、SVG Artistaの左上「OPEN SVG」をクリックしSVGファイルを開くことで簡単にアニメーションを作成できました。
SVGArtistaの画面左側に「STROKE ANIMATION」と「FILL ANIMATION」の編集画面があります。
それぞれ下記を編集できるのでお好みでカスタマイズしてみましょう。
- STROKE ANIMATION：線のアニメーションを編集
- FILL ANIMATION：塗のアニメーションを編集
右上の「PLAY」をクリックすることでアニメーションを確認することができます。
ちなみに僕は、アップロード後のデフォルト状態でアニメーションさせています。
作成したアニメーションのコード（HTML・CSS）を取得
使用するアニメーションが決まったら、画面右上の「GET CODE」をクリックすることで、上記のようにSVGファイルのHTMLコードとアニメーションさせるためのCSSが表示されます。
それぞれコピペするだけで、アニメーションを実装できます。
ちょっとつまずいたところ
SVGArtistaを使ってアニメーションを作成するときに僕自身がつまずいたところを最後に紹介しておきます。
つまずいたところは下記の2点です。
- illustratorの画像にアウトラインを付ける方法がわからない
- 「animation type」がTransitionだと消えるアニメーションになる
illustratorの画像にアウトラインを付ける方法がわからない
単純にillustratorのスキル不足です。
僕自身illustrator初心者であり、ちゃんと学んだことがなかったので、アウトライン？パス？とSVGファイルを作成するまでの段階でつまずきました。
今回もなんとかググっていけましたが、作業効率を考えると基礎知識を付けておくべきかなと。
これから「とりあえずillustratorは使える」レベルには知識とスキルを付けようと思います。
「animation type」がTransitionだと消えるアニメーションになる
上記画面の左上に「animation type」を選べるところがあり、CSSの「Transition」か「Animation」のどちらでアニメーションを作成するか選ぶことができます。
はじめは「Transition」で実装しており、SVGArtistaのプレビューではうまくアニメーションされるのですが、いざファイルに移し、サイトに表示させてみると、表示されるアニメーションではなく消えていくアニメーションになってしまい、うまく表示されませんでした。
「Animation」で作成するとうまくいったので大丈夫でしたが、「Transition」でなぜうまく表示されなかったのか検証しようと思います。
終わりに
SVGファイルに対応してたブラウザが増えてきたこともあり、ロゴや文字などでSVGファイルを使うことも増えてきました。
WordPressをメインで使っていることもあり、あまり使う機会は多くありませんが、面白そうなので作ってみた次第です。
今後も作ってみたいものは作ってみる精神でいろいやっていこうとおもいます。
Coment