アニメーション基礎編イラストレーターで描いた画像や文字をsvgという拡張子で書き出し、それをcss3でアニメーションしようの巻です。svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに有効です。FlashやJavascriptを使わないので軽いのであります。}イラストレーター(CS6)で描画・書き出し好きに描いて下さい。線の太さや色はsvgに書き出してからcssで変えられます。文字はアウトライン化して下さい。レイヤーには必ず名前を付けて下さい(必ず英語の小文字で)。designという風に)。出来たらsvgで書き出します。保存を押すと下記の様なダイアログボックスが表示されます。したら「svgコード」をクリック。クリックしたら下記の様な理解不能なたくさんの数字が表示されます。svgという開始タグから終了タグまでが必要な部分です(残った部分はいりません)。それを表示させたいhtmlファイルにコピー&ペーストします。イラストレーターのヴァージョンが古い場合「svgコード」というボタンが表示されないかもしれません。2,などなど)で開けばコードが見れます。コードをhtmlファイルにコピーしました。なんと、イラストレーターのレイヤーごとにgというタグでくくられています。(graphicのgかな?)そしてgにレイヤー名がid名としてつけられています。そのidの中に、たくさんのパスがあるわけです。pathというタグがたくさんありますよね。貼付けたらcssで見た目を調整&アニメーションする。見慣れないプロパティがあります。現在いろいろと勉強中。animationが使えないブラウザだと、何も見えず、何も起こらなくなって困る」などの対策もあるので、この記事は応用編に続きます。今回は基礎編ということでここまでです。