2017年6月2日 軽量で美しいSVGのパスで書かれたイラストが、アニメーションして表示されるのを一度は見たことがあるだろう。javascriptやCSSを駆使して自分でSVG アニメーションを作るのは面倒だ! しかし、苦労せずとも簡単に10分で、いや5分で「SVG アニメーション」ができるプラグインが、今回使い方を説明する「jQuery DrawSVG」である。 SVGってなんだよ?という人にもSVGファイルのHTMLへの設置の仕方や、SVGファイルの作り方・使い方も解説する! さらに最後に「実用編」として、画面ロード時にすぐに実行せずにターゲットが見える位置までスクロールしてからアニメーションする方法も解説しよう! SVG アニメーションする為に、必要なもの まずはSVG アニメーション用のプラグイン「jQuery DrawSVGの公式」サイトから、プラグイン一式をダウンロードしよう!
![SVGアニメーションが5分で作れる!jQuery DrawSVGの使い方 - STAND-4U](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6f3dad1bfc741418c58dce2e1f2892967fd5c40/height=288;version=1;width=512/https%3A%2F%2Fstand-4u.com%2Fstand-4u%2Fwp-content%2Fuploads%2F2017%2F06%2Ftitle_drawsvg.jpg)