株式会社BOTAO

SVG画像ファイルからcssでアニメーションしてみた

 : 

トップ > トピックス > クリエイティブ > SVG画像ファイルからcssでアニメーションしてみた

エンジニアのあんちゃんです!

Adobe Illustratorなどでsvgの作成ができますが、これとcssを使って、動画ではないアニメーションを作成できます。

デモページはこちら!

そもそもSVGとは、

Scalable Vector Graphicsは、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

ウィキペディア

…というものです!(詳しい説明は割愛ー!)

svgファイルを作成ー(^^)/

さて、まずはAdobe Illustratorでイラストを作ります…!
最近は猫動画をずっと観て癒され続けているので、猫を描きます。

…て、イラレじゃない!!というか電子機器じゃなく鉛筆!笑

…絵が圧倒的に描けない私は、もちろんペンタブであろうがマウスであろうが、直筆であろうが上手に描けません。

その中で、まだなんとか頑張れば、描いている物体が何なのか判別できるように描くことができるのは紙かなと…(IT機器フル活用な「エンジニア」という肩書きを、今ばかりは隠したい気持ちでいっぱいです;_;)

…気を取り直して、紙にかいた絵をパソコンに取り込み、イラレで上からなぞります。 
(耳の部分は、カワイイで有名なスコティッシュフォールドの耳にしようと描いてみたら犬になっちゃったので諦めた、の様子です笑)

ペンツールを多用します!

輪郭の次は目を。

眉毛があった方が可愛いか!?と思い眉毛。そして口。鼻は中途半端なピンク色。

耳の穴!?と、額に虎柄のアレンジ!!!!

…なんとも言えない表情とクオリティの猫の完成です!

svgファイルをテキストエディタで開いてみる

次に、作成したデータからSVGファイルにします。

イラレだと、全ての要素を選択して「アセットの書き出し」でSVGとして書き出します。

そして、この書き出されたSVGファイルを、テキストエディタなどで開くと、中身はこんな感じ。

文字がびっしり!!!

そして、cssでアニメーションを行いますが、このページを参考にしました(というかほとんどコードはパクってきているのがバレますね)

CSSとSVGで簡単にラインアニメーションを作る方法【Illustrator初心者向け】

HTMLコード(svgファイルをエディタで開いたコード)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 491.88 446.67"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4,.cls-5{stroke:#333;stroke-miterlimit:10;stroke-width:5px;}.cls-2{fill:#fff;}.cls-3{fill:#333;}.cls-4{fill:none;}.cls-5{fill:#ffa6a6;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="r1"><path class="cls-1" d="M270.08,443.73s-49-.82-66.24-3.88-58-11.59-71.2-21.72S98,387.94,89.75,371.66,52.53,293.28,50.31,255.92s-2.44-14.45,0-27.88,3.38-35.61,1.24-55.59-10.36-64.82-20.5-87.53S7.51,40.82,5.43,35.18s-5-11.45-.76-15,57.88,24,82.24,39.53,45.47,48.85,49.38,49.84,64.62-17.14,91.09-17.92,90.89,5.28,99.8,4.15,47.62-49.43,85.67-67.27,60.07-25.12,68.24-25.9,9,2,7.89,5.57S463.1,43.12,460.65,47.14s-39.94,95.75-34.46,116,45.07,98.83,43.3,119,3.75,38.36-6,59.36-32.39,56-57.26,67.5S306.79,448,270.08,443.73Z"/><path class="cls-2" d="M220.79,248.32c-1.3-3.06-17.77-17.76-36.49-23.4l-.33-.09a41,41,0,0,1-.56,62.67c4-1.37,7.42-2.73,10.45-3.71C204.72,280.29,222.08,251.38,220.79,248.32Z"/><path class="cls-2" d="M109.39,255.92a41.22,41.22,0,0,1,13.22-30.12C103,232.16,86.91,244,86.91,244c-1.7,21.8,17.94,37.68,38.9,44.8A41.5,41.5,0,0,1,109.39,255.92Z"/><path class="cls-3" d="M198.27,255.92A41.3,41.3,0,0,0,184,224.83c-18.44-5.54-22-5.9-47.25-2.37a83.93,83.93,0,0,0-14.11,3.34,41,41,0,0,0,3.2,63,81,81,0,0,0,15.45,3.63c18.32,2.34,31.92-1.35,42.15-4.9A41.4,41.4,0,0,0,198.27,255.92Z"/><path class="cls-2" d="M310.2,242.53a40.65,40.65,0,0,1,7.42-23.41c-16.08,9.66-28.07,26.15-28.67,29.27-.63,3.27,22.4,27.9,33.75,29.06,2.57.26,5.46.71,8.67,1.14C318.67,271.14,310.2,257.78,310.2,242.53Z"/><path class="cls-2" d="M419,216.15s-20.66-9.28-42.75-10.63c13.63,7.23,22.86,21.09,22.86,37a40.89,40.89,0,0,1-9.25,25.85C409,257.08,425.23,237.29,419,216.15Z"/><path class="cls-3" d="M376.21,205.52a81.13,81.13,0,0,0-10.46,0c-25.54,1.83-28.87,2.93-46,12.35-.71.4-1.42.81-2.12,1.24a40.65,40.65,0,0,0-7.42,23.41c0,15.25,8.47,28.61,21.17,36.06,11,1.49,25.85,2.85,44.57-3.72a80,80,0,0,0,13.88-6.49,40.89,40.89,0,0,0,9.25-25.85C399.07,226.61,389.84,212.75,376.21,205.52Z"/><path class="cls-4" d="M208.74,214.5s-30.94-20.83-54.78-18"/><path class="cls-4" d="M287.13,213.09s26-24.89,51.95-25.06"/><path class="cls-5" d="M227.38,299.56s8.87,3.35,14.47,1.23,10.94-5.4,15.88-5.65,14.47.36,20.12,0,7.41-5.76,12.7-5.7,5.45,3.69,5.45,3.69-7.92,23.48-27.86,24.57S227.38,308.56,227.38,299.56Z"/><path class="cls-4" d="M227.38,348.44a8,8,0,0,0,8.82,2.92c6-1.51,32.47-16,32.47-16s21.27,8.82,29.34,9.35,14.78-7.06,14.78-7.06"/><line class="cls-4" x1="268.14" y1="317.7" x2="268.67" y2="335.38"/><path class="cls-4" d="M166.32,326.54S62.82,343,42.75,351.36"/><path class="cls-4" d="M163.5,351.36s-101.07,26-111.95,34.84"/><path class="cls-4" d="M166.32,368.78S68.46,418,60.57,429.26"/><path class="cls-4" d="M377,303.57S476.55,279.34,482.91,279"/><path class="cls-4" d="M382.32,326.54S478,317,482.91,317.7"/><path class="cls-4" d="M382.32,351.36s94.94,6.26,100.59,8.37"/><path class="cls-1" d="M79.74,131.81S64.68,77.46,60.57,76s41.92,35.3,44,40.24-7.84,7.06-7.84,7.06"/><path class="cls-1" d="M366.33,103.91s35.3-38.45,47.3-39.87c0,0-14.48,43.77-15.36,50.83s-12.17,0-12.17,0"/><path class="cls-2" d="M194.1,118s8.67-6,33.28-7.37,42.7,3.69,42.7,3.69"/><path class="cls-2" d="M202.13,131.81s20.91-4.24,33.61-4.24,24.56,0,32.4,2.12"/><path class="cls-2" d="M208.74,150.87s22.77-3.53,31.24-3.53,19.76-1.41,24.71,0"/><path class="cls-2" d="M227.38,91.65s16.25,74,16.19,77.57"/></g></g><text x="320" y="50" font-size="20" stroke="black" text-anchor="end" stroke-width="0.5" >SVGアニメーション猫</text></svg>

cssコード

/* svgアニメーション
---------------------------------------------------------------- */

svg {
	width: 300px;
	height: auto;
 	display:block;
 	position:absolute;
 	top:0;
 	bottom:0;
 	left:0;
 	right:0;
 	margin:auto;
}
.cls-2, .cls-3, .cls-4, .cls-5{    
	stroke:#333;
	fill:#333;
	fill-opacity: 0;
	stroke-width:5;
	stroke-dasharray: 3000;
	stroke-dashoffset:3000;
	animation: LINE 8s ease-in 0s forwards;
 	stroke-linejoin:round;
}
.cls-1{    
	stroke:#333;
	fill:#ddd;
	fill-opacity: 0;
	stroke-width:5;
	stroke-dasharray: 3000;
	stroke-dashoffset:3000;
	animation: LINE2 8s ease-in 0s forwards;
 	stroke-linejoin:round;
}
text{
	stroke-dasharray:3000;
	stroke-dashoffset:3000;
 	animation: TEXT3 8s ease-in 0s forwards;
}
@keyframes LINE{
	0%{stroke-dashoffset:3000;fill-opacity: 0;}
	30% {fill-opacity: 0;}
	35% {fill-opacity: 1;}
	100%{stroke-dashoffset:0;fill-opacity: 1;}
}
@keyframes LINE2{
	0%{stroke-dashoffset:3000;fill-opacity: 0;}
	80% {fill-opacity: 0;}
	100%{stroke-dashoffset:0;fill-opacity: 1;}
}
@keyframes TEXT3{
	0%{stroke-dashoffset:3000;fill-opacity: 0;}
	80% {stroke-dashoffset:3000;fill-opacity: 0;}
	100%{stroke-dashoffset:0;fill-opacity: 1;}
}

輪郭のところを見ると、顎のところからアニメーションがスタートしているのですが、
これは、イラレで輪郭を描くときに顎からペンツールをスタートさせたので、それがそのまま適用されています。

どこから筆を入れるか、という情報もsvg化するときに記憶しているということですね。

これがベクターデータ!?すげー(急に素人^^;)

失敗したのでそれも公開!笑

さて、このイラスト作成時に失敗したものをご紹介します。

注目すべきは輪郭。なんか変な感じにスタートして、一周描いた後に中途半端に2度描きしてますね。

これは、イラレで描いている段階で、最初細い線で描いていたものを途中から「輪郭の線太くしよ〜」と太さを変化させたものが数値データとして残っている状態のようです。

さっきのなが〜いsvgデータのどこかのコードを削除してスッキリさせれば、きっとこれは解消するのでしょうが、
まだまだ勉強不足のため、今回は輪郭を(既に線を太くした状態で)描き直しました!

二度手間なので、ちゃんと勉強しましょうね(特に自分!笑)

まとめ

というわけで、svgデータからアニメーションを作る、いかがでしたか?

svg用のスタイル「fill」や「stroke」、そしてアニメーション用のスタイルなどを駆使して、ものすごい動きのあるアイコンなどを作成することもできると思います。

ぜひお試しあれ!!


この記事を書いた人

あんちゃん
フロントエンジニア / ディレクター
あんちゃん

関連記事

ファッションを通じて「ページトップに戻る」不要説の立証を試みる【前編】…オシャレ……
秋をみつけに浜町公園へ
「Slider Pro」のナビゲーションボタンをリメイク

最近の投稿

カテゴリ

タグ

アーカイブ

そのほかの記事