freyjasvgアニメーションで動くロゴを作ってみようインターネッツの皆さまこんにちは。2014年もあとわずか、ということで今年勉強したことなどを振り返りつつ、自分的に押さえておきたい項目を改めて記しておきたいと思います。本日は、今じわじわ来てるSVGを使った表現方法をひとつやってみたいと思います。こちらが今回作成したロゴです。線と塗りをそれぞれアニメーションさせています。DEMOSVGアニメーションで動くロゴを作る使用するソフト:イラストレーターcss3でアニメーション設定それでは順を追って作り方を説明いたします。1.イラストレーターでロゴを作成するテキストツールで文字を書きます。フォントは少し太めの方がいい感じに仕上がるかも。2.テキストをアウトライン化するテキストを選択して右クリック>アウトラインを作成します。3.SVGコードを取得ファイル>別名で保存>ファイル名を付けたら保存するファイル形式をSVG(svg)を選択します。(SVG圧縮(svgz)は圧縮ファイルですのでファイルサイズが1/3くらいに軽くなりますが、テキストエディタで編集出来ないのでここではSVG(svg)を使います。)4.htmlファイルにペースト保存するファイル形式でSVG(svg)を選択すると、下図の画面が出てきますのでSVGコードをクリックします。コードがずらずらと書いてありますが<svg>以下を全て選択してコピーします。htmlファイルを作ってbodyタグの中にペーストします。5.cssで線の太さや塗りを指定する先ほどペーストしたsvgファイルのidを任意の名前に変更します。ここではid名をsvgLogoとしました。id名を付けたら、headタグの中にCSSで線の太さや塗りの色などを指定していきます。下記がソースの一部となります。今回は塗りにグラデーション指定をして、さらにアニメーションさせています。塗りのグラデーション指定は、イラレでコピーしたsvgタグとgタグの間に新たにdefsタグを作り、塗りのグラデーション設定を書き足しました。それにidを付け、cssでfill:url(“#MyGradient”);として塗りの色指定をしています。●defsタグについてはこちらに詳しいです。●グラデーションの設定についてはこちらも参考にさせて頂きました。●りんごの勉強会でもやりました。ここのid名を変えて、cssで色や動きなどを指定します。<!--ここでロゴの塗りをグラデーションにする指定をしています。</defs><g>〜以下、省略グラデーションさせないならば、defsタグの部分は不要です。{fill:url(“#MyGradient”);}のurl(“#MyGradient”)の部分には、普通に色番号を入れればOKです。皆さんもぜひ、svgコードを差し替えて試してみてくださいね。それではごきげんよう。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。