リンク元　manaka design

SVG LINE アニメーション基礎編

イラストレーターで描いた画像や文字をsvgという拡張子で書き出し、それをcss3でアニメーションしようの巻です。svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに有効です。もちろんFlashやJavascriptを使わないので軽いのであります。（リロードすれば何度もアニメーションします）

CSS

svg{
	display:block;
	margin:3em auto;
	/*以下の2行はfluid image（レスポンシブデザイン）*/
	max-width: 100%;
    height: auto;
}
path{
	stroke-width:0.1em;
	stroke:#000;
	stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawline 10s linear forwards;
  
}

#manaka path{
	fill:#ccc;
}
#design path{
	fill:#fff;
  
}
@keyframes drawline {
  to {
    stroke-dashoffset:0;
  }

イラストレーター（CS6）で描画・書き出し

好きに描いて下さい。線の太さや色はsvgに書き出してからcssで変えられます。文字はアウトライン化して下さい。レイヤーには必ず名前を付けて下さい（必ず英語の小文字で）。今回はレイヤーを3つに分けました（swallow, manaka, designという風に）。

描画

出来たらsvgで書き出します。

書き出し

保存を押すと下記の様なダイアログボックスが表示されます。そしたら「svgコード」をクリック。

「svgコード」をクリック

クリックしたら下記の様な理解不能なたくさんの数字が表示されます。svgという開始タグから終了タグまでが必要な部分です（残った部分はいりません）。それを表示させたいhtmlファイルにコピー＆ペーストします。

イラストレーターのヴァージョンが古い場合「svgコード」というボタンが表示されないかもしれません。その場合は普通にsvgで書き出して、その書き出したsvgファイルをテキストエディタ（dreamweaver,mana2,Sublime Text 2,などなど）で開けばコードが見れます。

「svgコード」をクリック

コードをhtmlファイルにコピーしました。なんと、イラストレーターのレイヤーごとにgというタグでくくられています。（graphicのgかな？）そしてgにレイヤー名がid名としてつけられています。そのidの中に、たくさんのパスがあるわけです。pathというタグがたくさんありますよね。

htmlファイルに貼付けてコードをチェック

貼付けたらcssで見た目を調整＆アニメーションする。

見慣れないプロパティがあります。現在いろいろと勉強中。

参考サイト

塗りの部分もアニメーションさせたり、「css animationが使えないブラウザだと、何も見えず、何も起こらなくなって困る」などの対策もあるので、この記事は応用編に続きます。とりあえず今回は基礎編ということでここまでです。

SVG LINE アニメーション応用編