SVGでサイトロゴのアニメーションを作ってみる

dorako321

10年前

SVGでぬるぬる動く画像作れるとなんだかできる人っぽいですよね。なので今回はSVGでアニメーションするロゴを作ってみたいと思います。

Adobe illustratorでロゴを作成。ロゴは文字ツールとそれっぽいフォントを指定して作るだけです。

文字ツールで作成した文字を右クリックして「アウトラインを作成」を押下して文字をアウトライン化します。

この状態でメニューの「保存」を押下し、保存形式でSVGを選択するとSVG形式のファイルを取得することができます。

以下SVGのサンプルです。こんな感じのデータが出力されます。どこからどこへ線を引くかという情報がたくさん書かれていますね。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<g>
	<path fill="#8CC63F" stroke="#006837" stroke-width="3" stroke-miterlimit="10" d="M131.271,409.76
		c-8.271-0.098-16.444-0.729-24.519-1.896c-8.077-1.168-15.835-3.503-23.278-7.006c-7.443-3.503-14.036-8.223-19.775-14.156
		c-2.239-2.432-4.232-5.059-5.984-7.881c-1.751-2.821-3.284-5.74-4.597-8.757c-1.313-3.015-2.36-6.08-3.138-9.195
		c3.015-1.069,6.032-2.212,9.048-3.43c3.015-1.215,6.007-2.48,8.976-3.794c2.967-1.313,5.958-2.555,8.976-3.722
		c0.485,2.335,1.117,4.647,1.897,6.933c0.778,2.287,1.824,4.451,3.138,6.494c1.313,2.043,2.941,3.94,4.889,5.691
		c4.474,3.795,9.461,6.521,14.959,8.174c5.496,1.655,11.115,2.677,16.857,3.064c5.74,0.39,11.479,0.584,17.222,0.584l6.275-0.292
		l2.481,28.751L131.271,409.76z M109.087,362.912l-0.146-21.162l-52.103,0.146l0.146-28.897l51.519-0.146l0.146-9.049l-51.519-0.146
		v-28.897l51.665,0.292v-11.53l36.34,0.146l0.146,11.384l12.989,0.146l-0.146,28.897l-12.843-0.146v8.757l46.265-0.292l0.438,29.043
		l-46.411,0.146l-0.146,21.017l-0.146,0.146L109.087,362.912z M160.313,308.912l0.292-45.243h16.784l-0.146,45.243H160.313z
		 M179.287,308.912l0.146-45.243l15.908-0.146l0.584,0.146l0.146,45.243H179.287z"/>
</g>
</svg>

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

y="0px" width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">

<g>

<path fill="#8CC63F" stroke="#006837" stroke-width="3" stroke-miterlimit="10" d="M131.271,409.76

c-8.271-0.098-16.444-0.729-24.519-1.896c-8.077-1.168-15.835-3.503-23.278-7.006c-7.443-3.503-14.036-8.223-19.775-14.156

c-2.239-2.432-4.232-5.059-5.984-7.881c-1.751-2.821-3.284-5.74-4.597-8.757c-1.313-3.015-2.36-6.08-3.138-9.195

c3.015-1.069,6.032-2.212,9.048-3.43c3.015-1.215,6.007-2.48,8.976-3.794c2.967-1.313,5.958-2.555,8.976-3.722

c0.485,2.335,1.117,4.647,1.897,6.933c0.778,2.287,1.824,4.451,3.138,6.494c1.313,2.043,2.941,3.94,4.889,5.691

c4.474,3.795,9.461,6.521,14.959,8.174c5.496,1.655,11.115,2.677,16.857,3.064c5.74,0.39,11.479,0.584,17.222,0.584l6.275-0.292

l2.481,28.751L131.271,409.76z M109.087,362.912l-0.146-21.162l-52.103,0.146l0.146-28.897l51.519-0.146l0.146-9.049l-51.519-0.146

v-28.897l51.665,0.292v-11.53l36.34,0.146l0.146,11.384l12.989,0.146l-0.146,28.897l-12.843-0.146v8.757l46.265-0.292l0.438,29.043

l-46.411,0.146l-0.146,21.017l-0.146,0.146L109.087,362.912z M160.313,308.912l0.292-45.243h16.784l-0.146,45.243H160.313z

M179.287,308.912l0.146-45.243l15.908-0.146l0.584,0.146l0.146,45.243H179.287z"/>

</g>

</svg>

次にウェブ上で表示させるためindex.htmlを書きます。svgファイルのsvgタグをdivタグの中に入れます。また、CSSでアニメーションさせるため、svgタグ内にあるpathタグの中に「class=”path”」属性を追記しています。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVGアニメーション</title>
    <link rel="stylesheet" type="text/css" href="default.css" media="all">
</head>

<body>
    <div class="box">
        <svg /> (ここに先ほど作成したsvgファイルのsvgタグを貼り付ける)
    </div>
</body>

</html>

<!DOCTYPE html>

<head>

<title>SVGアニメーション</title>

</head>

<body>

</div>

</body>

</html>

最後にsvgをアニメーションさせるCSSを記述しましょう。ファイル名はdefault.cssとしました。

.box {
    width: 1060px;
    height: 370px;
    margin: 200px auto;
}

.path {
    stroke: #092951;
    fill: none;
    stroke-width: 1;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: DASH 3s ease-in alternate forwards;
    -webkit-animation: DASH 3s ease-in 0s forwards;
    -o-animation: DASH 3s ease-in 0s forwards;
    animation: DASH 3s ease-in 0s forwards;
}
@keyframes DASH {
    0% {
        stroke-dashoffset: 3000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@-moz-keyframes DASH {
    0% {
        stroke-dashoffset: 3000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@-webkit-keyframes DASH {
    0% {
        stroke-dashoffset: 3000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@-o-keyframes DASH {
    0% {
        stroke-dashoffset: 3000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@-ms-keyframes DASHf {
    0% {
        stroke-dashoffset: 3000;
    }
    100% {
        stroke-dashoffset: 0;
    }

.box {

width: 1060px;

height: 370px;

margin: 200px auto;

}

.path {

stroke: #092951;

fill: none;

stroke-width: 1;

stroke-dasharray: 3000;

stroke-dashoffset: 3000;

animation: DASH 3s ease-in alternate forwards;

-webkit-animation: DASH 3s ease-in 0s forwards;

-o-animation: DASH 3s ease-in 0s forwards;

animation: DASH 3s ease-in 0s forwards;

}

@keyframes DASH {

0% {

stroke-dashoffset: 3000;

}

100% {

stroke-dashoffset: 0;

}

@-moz-keyframes DASH {

0% {

stroke-dashoffset: 3000;

}

100% {

stroke-dashoffset: 0;

}

@-webkit-keyframes DASH {

0% {

stroke-dashoffset: 3000;

}

100% {

stroke-dashoffset: 0;

}

@-o-keyframes DASH {

0% {

stroke-dashoffset: 3000;

}

100% {

stroke-dashoffset: 0;

}

@-ms-keyframes DASHf {

0% {

stroke-dashoffset: 3000;

}

100% {

stroke-dashoffset: 0;

}

以上で完成です。

完成品はこちら。

もっと細かいことをしたいならば詳しく調べないとですが・・。初めの第一歩としてこれで十分楽しめますね。

参考:

SVG線画が美しいリッチアニメーションの作り方