はじめに SVG(Scalable Vector Graphics)というと、まず、「ベクター画像」という特徴を思い浮かべる人は多いでしょう。しかしSVGはただの画像ではなく、HTMLと同じくDOMを構成するのも特徴のひとつです。SVG(DOM)をJavaScriptで操ることで、インタラクティブなコンテンツを作ることができます。そのためのライブラリ「Snap.svg」について知識を深めましょう。 なお、このシリーズで紹介するサンプルは次のリポジトリにまとめてあります。併せて、参照してください。 GitHub - codegrid/2015-snapsvg SVGをJSで操作する SVGはHTMLと同じようにDOMを構成します。そしてそのDOMをJavaScriptで操作することができます。SVGを活用すれば、SVGならではのアニメーションが可能です。 このように、SVGは、斜めや曲線の表
![Snap.svgで快適SVGアニメーション | 第1回 Snap.svgとは](https://cdn-ak-scissors.b.st-hatena.com/image/square/08e2d9730dc9a6c9b2182501306aa9bc03a349a5/height=288;version=1;width=512/https%3A%2F%2Fcodegrid.imgix.net%2Fimage.png%3Fixlib%3Djs-3.8.0%26w%3D1200%26h%3D630%26mark%3Dhttps%253A%252F%252Fcodegrid.imgix.net%252F~text%253Fixlib%253Djs-3.8.0%2526w%253D1000%2526txt%253DSnap.svg%2525E3%252581%2525A8%2525E3%252581%2525AF%2526txt-fit%253Dmax%2526txt-size%253D57%2526txt-font%253DHiragino%252520Sans%252520W5%2526txt-color%253Dfff%26mark-x%3D90%26mark-y%3D195%26blend%3D%2523D81D1B%26blend-mode%3Doverlay%26txt%3DSnap.svg%25E3%2581%25A7%25E5%25BF%25AB%25E9%2581%25A9SVG%25E3%2582%25A2%25E3%2583%258B%25E3%2583%25A1%25E3%2583%25BC%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%25B3%2520%257C%2520%25E7%25AC%25AC1%25E5%259B%259E%26txt-align%3Dtop%252Cleft%26txt-font%3DHiragino%2520Sans%2520W5%26txt-size%3D30%26txt-pad%3D100%26txt-color%3Dfff)