svgアニメーションで動くロゴを作ってみよう

インターネッツの皆さまこんにちは。
2014年もあとわずか、ということで今年勉強したことなどを振り返りつつ、自分的に押さえておきたい項目を改めて記しておきたいと思います。

本日は、今じわじわ来てるSVGを使った表現方法をひとつやってみたいと思います。
こちらが今回作成したロゴです。まずはご覧ください。線と塗りをそれぞれアニメーションさせています。

☆svgのロゴ DEMO

SVGアニメーションで動くロゴを作る

使用するソフト:イラストレーター
css3でアニメーション設定

それでは順を追って作り方を説明いたします。

1.イラストレーターでロゴを作成する

テキストツールで文字を書きます。フォントは少し太めの方がいい感じに仕上がるかも。

2.テキストをアウトライン化する

テキストを選択して右クリック>アウトラインを作成します。
outline_03

3.SVGコードを取得

ファイル>別名で保存>ファイル名を付けたら保存するファイル形式をSVG(svg)を選択します。
(SVG圧縮(svgz)は圧縮ファイルですのでファイルサイズが1/3くらいに軽くなりますが、テキストエディタで編集出来ないのでここではSVG(svg)を使います。)
svg(svg)_03

4.htmlファイルにペースト

保存するファイル形式でSVG(svg)を選択すると、下図の画面が出てきますのでSVGコードをクリックします。コードがずらずらと書いてありますが<svg>以下を全て選択してコピーします。
htmlファイルを作ってbodyタグの中にペーストします。
svgcode_03

5.cssで線の太さや塗りを指定する

先ほどペーストしたsvgファイルのidを任意の名前に変更します。ここではid名をsvgLogoとしました。
svgid_03
id名を付けたら、headタグの中にCSSで線の太さや塗りの色などを指定していきます。

下記がソースの一部となります。
今回は塗りにグラデーション指定をして、さらにアニメーションさせています。
塗りのグラデーション指定は、イラレでコピーしたsvgタグgタグの間に新たにdefsタグを作り、塗りのグラデーション設定を書き足しました。それにidを付け、cssでfill:url(“#MyGradient”);として塗りの色指定をしています。

●defsタグについてはこちらに詳しいです。
●グラデーションの設定についてはこちらも参考にさせて頂きました。
りんごの勉強会でもやりました。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>svg</title>
	<style>
	body{
		background-color: #BF8A6B;
	}
	svg{
	display:block;
	margin: 0 auto;
	max-width: 100%;red
    height: auto;
    }
    #svgLogo path{
    fill:url("#MyGradient");
	stroke-width:0.1em;
	stroke:#501F10;
	stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawline 4s linear forwards,FillIn 2s 4s linear both;
    }

    @keyframes drawline {
     to {stroke-dashoffset:0;}
     }
    @keyframes FillIn {
     from { fill-opacity: 0; }
     to { fill-opacity: 1; }
     }

	</style>   
</head>
<body>
<svg version="1.1" id="svgLogo" ここのid名を変えて、cssで色や動きなどを指定します。
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="600px"
	 viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
	<defs>
    <linearGradient id="MyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%"  stop-color="#fc6"/>
      <stop offset="100%" stop-color="#f09"/>
    </linearGradient> <!--ここでロゴの塗りをグラデーションにする指定をしています。-->
	 </defs>
<g>〜以下、省略

グラデーションさせないならば、defsタグの部分は不要です。
また、cssの#id名 path {fill:url(“#MyGradient”);}の
url(“#MyGradient”)の部分には、普通に色番号を入れればOKです。

皆さんもぜひ、svgコードを差し替えて試してみてくださいね。
それではごきげんよう。

アイキャッチ画でピンときちゃった方とは良い酒が飲めそうだわ(笑)ちょうどBGMだったんです(^^)♪

コメントを残す