初心者コーダーがやってみた！噂のSVGでアニメーションを作ってみました

2015.10.29

こんにちは、capaでデザインを担当しております。初心者コーダーこと鈴鹿です。
私はかれこれ、10年以上紙媒体のデザイン、編集をやってきました。2年程前にコーディングを学び、今ではおよばずながらwebデザイナーとして働かせていただいております。UXデザイナーになることを夢に日々奮闘しております。
今日は、「ベクタデータ」でなおかつ「テキストファイル」で作成されているSVGという画像形式を使ってCSSとJavaScriptでアニメーションさせてみたのでレポートします〜

SVGってなに？

聞いたことないし！新しい画像形式なんじゃない？なんて思ってるそこのあなた、実はこのSVG、2001年に世にお目見えしております。もうかれこれ世に出て14年も経っております。
えぇ〜知らなかった！！！はい、私もです。私も最近知りました(笑)
では何故普及しなかったのか？？ベクタ形式の画像を描画する言語の対立や、SVGを扱えるソフトがなかったりだとか。。。いろいろありました?
そして昨今JavaScriptやCSS、Web APIなどが普及したおかげで、やっとこさ日の目をみることが出来たわけです。私が思うに一番大きいのはillustratorでSVGでの書き出しが出来るようになったことですかね〜確かCS4くらいから出来たような。。。
そして今ではInternet Explorer9から、他ブラウザもSVG対応になりました✨やったー良かったねSVG?

その1「ベクターデータ」であること

では、そのSVGの何が良いのか？冒頭でもお話ししましたが、第1に「ベクターデータ」であることです。
ベクタ形式はラスタ形式の画像と違って、拡大しても荒れることなくキレイに表現できます。
それもそのはず、ピクセルではなくベジェなのですから。これだけでも、画像だらけのLPなんか作るとき助かるのですが〜さらに。

その２「テキストファイル」であること。

SVGはフォントを定義しファイルに埋め込むことができるので、保存時に「すべての文字」を選択すると、ユーザーが環境に対応していない状況でも、問題なく表示することができます。（でもちょっと重くなりますが。。。）
それと、illustratorの編集機能も保持できるので、あとから修正したりなんかもできます。（これもちょっと重くなります。。。）
テキストファイルってことは検索エンジンがこのまま読み取ってくれるの？？もうaltに文字いれなくていいの？
って思いますよね〜。残念ながら、検索エンジンに引っ掛けるにはtitle・desc要素を使ったほうが良さそうです。
SEO的にどうかはわかりませんが。いれといて損はなさそうです（笑）

そしてそして「XMLで記述されている」こと!

これによって、アイコン作ったり、アニメーションさせたり、エディタで開いて、JAVAとCSSを組み合わせることで色々できちゃいます！さてさて、お待たせしました。
SVGが何か分かったところで、ざっくりとですが簡単なアニメーション作ってみたので、レポートします。

SVGでアニメーション

これ作りました → https://stg.capa.co.jp/svg_animate/
まずは、illustratorでテキスト打ちます。アウトライン化して、SVGで保存します。

そして、保存したファイルをエディタで開きます。初心者コーダーの私はDreamWeaverでやりました（笑）
そのコードを使って、色々いじるわけですが。すごい行だ！って思いますよね。
でも肝心な部分はごく一部、もちろん全部必要ではありますが。。。消しちゃだめですよ〜（笑）

svgタグの中は、基本、位置やサイズなんかをいじれて、グレーで囲った部分のpathにクラス名をつけて、今回はclass=’path’にしました。あとはCSSで色々いじるだけです。
作り方は色々なサイトで詳しく掲載されていますので、そちらをご参照いただくか。。。
アップしたURLよりデータ抜き取って、SVG〜SVGまでを差し替えて使ってみたり。CSSをいじって色とか早さとか変えてみたりして遊んでいるうちに、なぁ〜んとなく分かってきて、もっと色々やりたい?って気になってきます❗️