ベクター形式でありながら、アニメーションタグやJSでのインタラクティブな操作ができたり、テキストエディタでの編集が可能だったりと、何かと便利なSVG。いろいろなシーンで活用されている方も多いと思いますが、今回はそんなSVG形式データの利便性を感じられる素材まとめ「The Benefits of SVG Images in Web Design」を紹介したいと思います。

Reports – Calls Animation

JSやアニメーションなど、SVG形式を利用した多彩な表現を実現できるリソースや実例がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

SVG Icons Animated with CSS
動くCSSのSVG天気アイコン。今まで静止画でしか表現できなかったアイコンに、豊かな表情を与えてくれています。
　
　
　
　

About Us – One Design Company – Chicago Web Design
ループアニメーションをアイコンに取り入れた実例。シンプルなデザインのアイコンも、動きを加えることにより分かりやすく、より魅力的になるということを改めて感じることができます。　
　
　
　
　

Multiplane Demo
フラットテイストな風景も、SVG形式を取り入れることで遠近感のある描写を実現可能。ぜひいろいろな風景画で実装してみたいですね。
　
　
アイデア次第でもっといろいろな表現を可能にしてくれる、今までなかなか手を出せなかったという方もこのまとめを参考に一度取り入れてみてはいかがでしょうか？

The Benefits of SVG Images in Web Design