アジケでフロントエンドエンジニアを始めて10か月の小松です。 今回はSVGを用いた線画アニメーションの簡単な実装方法をお伝えします。 実はこの技術は最近リニューアルした弊社ホームページでも利用しました(こちらです)。 画像がリアルタイムで描かれているような表現が可能になり、まさにSVGならではの表現方法と言えます。 目次 ・SVGとは? ・線画アニメーションを実装するために必要な技術 ・サンプル実装 1. SVGとは? 「Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。」(wikipediaより引用) なんだかよくわかりませんが凄くざっくり
![css3とjQueryで柔軟に実装できるSVG線画アニメーション](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b35371e7ec694a8be59e810c5bf52675dc4118b/height=288;version=1;width=512/https%3A%2F%2Fwww.ajike.co.jp%2Fswitch%2Fwp-content%2Fuploads%2Fsites%2F2%2F2016%2F02%2Fphoto-1429051883746-afd9d56fbdaf-min-1024x682.jpeg)