ツイート皆さん、こんにちは。今回は、SVGアニメーションの話をしようと思います。「SVGアニメーション」と聞いて難しいのでは?と思った方もおられるかもしれませんが、今回はCSSのみを使用した簡単に実装できるSVGアニメーションをご紹介しようと思います。この先、SVGの利用はますます増えていくことになるかと思いますのでSVGアニメーションの経験の無い方はこの記事を読んで是非一度作成してみてください。Graphics)とは、XMLをベースにしたベクターデータで構成された画像形式の一種です。WEBサイトでよく利用される「PNG」や「JPG」といった画像形式はドット(点)の集まりで構成されるビットマップデータなのですが、このビットマップデータには画像の拡大・縮小などの編集の際に画質が落ちてしまう特徴があります。ベクターデータは点や線などの情報を数値化し演算によって画像を再現するため拡大・縮小によって画質が落ちることがないことが大きな特徴です。Illustrator」を使って作成してみようと思います。新規ドキュメントを作成Illustratorを開いたら、一番上にあるメニューの中の「ファイル」→「新規」を選択して下さい。新規ドキュメントの作成画面が立ち上がるので、作成したいサイズを幅・高さに設定したうえで「作成」ボタンを押してください。先ほど作成したアートボード上に、実際に図形やテキストを作成してください。アウトラインを作成イラストが完成したら、最後にすべてのオブジェクトをアウトライン化しておいてください。上にあるメニューの中の「ファイル」→「保存」を選択して下さい。ファイルの保存の画面が立ち上がるので、「ファイルの種類」を「SVG」を選んで「保存」ボタンを押してください。SVGファイルの調整Illustrator等のツールを使い作成されたSVGデータには不要な情報が含まれている場合があります。調整をしなければいけないということはありませんが、調整しておくとソースの可読性が上がるうえにファイルサイズも縮小できるかと思いますので調整することをお勧めします。参考までに上で表示しているSVG画像のソースを下に記載しておきます。作成したSVGを下のコード参考に調整してみてください。</g></svg>上記のSVGコードを簡単に説明します。<svg>SVGを格納するための要素になります。<svg>タグには以下の属性を必ず指定してください。xmlns=”http://www.w3.org/2000/svg”SVG名前空間宣言と呼ばれるものです。height(画像の高さ)”こちらを正しく指定しておくことでレスポンシブに対応できるようになります。<g>オブジェクトをグループ化するためのタグになります。<path>d属性の中のパスデータを基に図形を描画するタグです。<defs>後で再利用できるよう描画オブジェクトを定義するためのタグとなりますが、今回はこの中で<style>を記載して使用します。<svg>ファイル内に直接CSSを記載する場合にはこの中で記載します。HTML内に直接<svg>を埋め込む場合には<defs>内にCSSを書くのではなく、外部のCSSファイルにスタイルを記載する方がいいかと思いますが、今回はSVGファイルにCSS(アニメーション)を含めることでそれ単体で完了できる形で作成したいと思います。上のコードでは使用されてはいませんが、この後SVGにアニメーションをつける際に使用します。SVGにアニメーションをつけるそれでは実際にSVGにアニメーションを設定してみます。最初に説明したようにアニメーションはCSSのみで設定します。</g></svg>上記のSVGコードを簡単に説明します。fillオブジェクトの塗りつぶしの色を指定します。strokeオブジェクトのアウトライン(線)の色を指定します。stroke-widthオブジェクトのアウトライン(線)の太さを指定します。troke-dasharrayオブジェクトのアウトライン(線)の間隔を指定します。」といった形になります。stroke-dashoffsetオブジェクトのアウトライン(線)の開始位置を指定します。animation要素に@keyframesアニメーションに関するプロパティをまとめて指定できます。100%といった)にスタイルを定義することでアニメーションを指定します。パスの数だけ@keyframesアニメーションを作成し、それぞれstroke-dashoffsetを変化させるタイミングをずらせは下のようなアニメーションも簡単に作成できます。まとめCSSによるSVGアニメーションについて簡単に解説してみましたが、いかがでしたか?それほど難しくはないと思いますので是非一度挑戦していただければと思います。ちなみにですが、今回作成したSVGのロゴは以下のサイトのものになります。Web制作デザインの基礎が分かるおすすめ書籍こんにちは。今回はwebデザインをする上で役に立つ書籍をご紹介します。Web制作デザインをワンランクアップ!効果的なタイポグラフィ表現Webサイトのタイポグラフィ表現は、ひと昔前では考えられなかったほど豊かになっています。Web制作レスポンシブデザインの基本と作り方を徹底解説こんにちは、ホネ吉です。北堀江GATEビル5Fプライバシーポリシーサイトマップホームページ制作・作成なら大阪のWEB制作.com。