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


こんにちは、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なんか作るとき助かるのですが〜さらに。

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

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

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

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

SVGでアニメーション

これ作りました → https://www.capa.co.jp/svg_animate/
まずは、illustratorでテキスト打ちます。アウトライン化して、SVGで保存します。
CAPA_SVG_img 4
CAPA_SVG_img 5
そして、保存したファイルをエディタで開きます。初心者コーダーの私はDreamWeaverでやりました(笑)
そのコードを使って、色々いじるわけですが。すごい行だ!って思いますよね。
でも肝心な部分はごく一部、もちろん全部必要ではありますが。。。消しちゃだめですよ〜(笑)
svg_a
svgタグの中は、基本、位置やサイズなんかをいじれて、グレーで囲った部分のpathにクラス名をつけて、今回はclass=’path’にしました。あとはCSSで色々いじるだけです。
作り方は色々なサイトで詳しく掲載されていますので、そちらをご参照いただくか。。。
アップしたURLよりデータ抜き取って、SVG〜SVGまでを差し替えて使ってみたり。CSSをいじって色とか早さとか変えてみたりして遊んでいるうちに、なぁ〜んとなく分かってきて、もっと色々やりたい?って気になってきます❗️

ざっくりとで、大変恐縮ではありましたが、私がごにょごにょ解説するよりも、他サイト見たほうが断然わかりますんで
以下に私が参考にさせて頂いたサイト記述しますので、見てみてくださいね〜
参考サイト → http://ascii.jp/elem/000/000/901/901319/

ではでは、またお会いしましょう〜ご声調ありがとうございました?


関連記事一覧

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

we love develop
アプリやシステムの開発を通じて、お客様のビジネスを成長させることが私たちのビジネスです。お気軽にお問い合わせください。
 お問い合せ

お電話でのお問い合わせはこちらから
TEL:03-5297-2871

メールマガジンの登録

キャパでは誰かに話したくなるようなIT小ネタを、週に一回メルマガで配信しています。
ぜひ購読してみませんか?
 購読する

ホワイトペーパーの入手

ITブログ月間20万PV達成!自社オウンドメディアの運用ノウハウを無料公開しています。
 ダウンロード

記事カテゴリ

月別投稿記事

PAGE TOP