プラグインを使ってSVGアニメーションにサクッと入門

プラグインを使ってSVGアニメーションにサクッと入門

Web業界に入るまでSVGを知らなかった、らいか(id:sakanatech)です。この前少しだけまとまった時間が取れたのでサクッと体験できるものがないかな?と思って探してみると、Lazy Line Painterという有名なプラグインを利用すれば簡単に使えるということが分かったので体験してみました。

 

SVGに興味をもったキッカケ

もともと、SVGって聞いたことあるけど何に使えるの?とか、使ったら何が嬉しいの?って思っていたところ、こんな記事を見つける。

【参考リンク】

グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして?

「ふむふむ、あのGoogleのロゴはSVG画像だったのね」

と思っていたところが、読み進めていくと普通の画像形式のファイルを読み込むよりもSVG形式で読み込んだほうが圧倒的にサイズを削減できて、画面描画速度向上に役に立つ!ということ。

この前、はてなブログが重いのでなんとか軽くできないか?と画像圧縮について調べていたので、サイトが軽くなる可能性があるというのは、すごく魅力的なワードでした。

 

今回つくるもの

当初は、SakanaTechのブログロゴを作れたらいいなぁと思っていたのですが、はてなブログでSVG画像を読み込むためには、GithubなどにSVGファイルを保存しておいて、読み込みを行わないといけなくて、その手法は手間がかかるし、何よりサイトを軽くするためにと思ってSVG画像を使おうとしているのに、外部サイトから読み込みを行うのであれば本末転倒かな?と思ったので、

特にブログに取り込むとかそういうことではなくて簡単に魚のイラストをSVGで作る。どうせならアニメーションとして動かしてみる!というのが今回の目標です。

 

手軽にSVGを作るには?

 

Illustratorでイラストをトレースする

色々なサイトを見てみて、自力でSVGのXMLを書くなんて神業に等しいし、そんな謎の労力をかけるのではなく
Illustratorのパス機能を使って、パスを引いていき、そのパスの軌跡をSVGとして出力してしまおう!というのが一番ラクな方法でした。

 

パスは頂点をつかめ!

Illustratorでパスを引く」と言いましたが、これがIllustratorに慣れているならまだしも、慣れていないなら相当難しい。

実は今回の作業で一番苦しんだのが、このパスを引くという作業。
そもそも、Illustratorの操作方法を簡単に知るだけで30分以上かかってパスを引くのも、最初は何度も何度もリテイクして頑張ってました。

このサイトを見てパスの数は最小限でトレースするイラストの頂点を掴んで作っていく!という極意を学びました。

Illustrator(Photoshop) のペンツールできれいなパス、ベジェ曲線を描くためのコツ(私流)

 

あとは、Illustratorの機能でSVGファイルを出力するだけ!簡単ですよね。

 

SVGを動かす!

がんばってトレースして作ったサカナをついに動かす時が来ました。

プラグインの使い方は至って簡単でした。

  • Lazy Line PainterのWebサイトにアクセス
  • SVGファイルをアップロードする
  • JavaScriptが出力されるのでコピーする
  • jQueryとLazyLinePainterを読み込む
  • 任意のid要素をもつdivを作る
  • 動く!嬉しい!

 

CodePenで確認

わたしはこういうサクッと作ったものを公開できるサーバーを持っていないので、サンプルプログラムはCodePenで確認しました。

 

See the Pen SVG traning #1 by lyca (@sakanatech) on CodePen.


ソースコードもほとんどっていうか、全てコピペで済みましたし、こんなに簡単にSVGアニメーションに入門出来るとは思っていませんでした。

 

はてなブログのタイトルをSVGに!

ここまでサクッと作れちゃうと、はてなブログのタイトルにSVGアニメーションを使えたらかっこいいなぁと思うのですが、やっぱりハードルが高いらしい。でも、いつかお試しでもいいので適用できたらいいなぁ

 

SVGの表示方法

SVGは4通りの方法を使ってWeb上に表示させることが出来ます。

  • HTMLにベタ書き
  • imgタグで読み込み
  • CSSのbackground-imageで読み込み
  • OBJECTタグで読み込み

どれもはてなブログとはちょっと相性が悪い。
やっぱり、一番はGitHubなどにファイルをアップロードして、GitHub上に保存したSVGファイルを読み込むのがいいのかなぁ・・・?
まだ答えが出てないです。

はてなブログでSVGを扱うのはめんどくさそうです。

でも、はてなブログで使うやり方があれば取り入れてみたいです。

 

らいか
SVGって結構前からある技術らしいのですが、SI企業にいたころは単語すら聞いた事がなくて今回初めて少しだけ勉強してみて、面白いと感じたのでどこか別の機会に使ってみたいなと思っています。
プラグインを使ってSVGアニメーションにサクッと入門

SNSへのシェアはこちらから!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて"Webのものづくりの楽しさ"に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。