TOP  >  Design  >  SVG形式データの利便性を感じられる素材まとめ「The Benefits of SVG Images in Web Design」
2015年07月29日

SVG形式データの利便性を感じられる素材まとめ「The Benefits of SVG Images in Web Design」

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

svg0729_0
Reports – Calls Animation

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

詳しくは以下

svg0729_2
SVG Icons Animated with CSS
動くCSSのSVG天気アイコン。今まで静止画でしか表現できなかったアイコンに、豊かな表情を与えてくれています。
 
 
 
 
svg0729_4
About Us – One Design Company – Chicago Web Design
ループアニメーションをアイコンに取り入れた実例。シンプルなデザインのアイコンも、動きを加えることにより分かりやすく、より魅力的になるということを改めて感じることができます。 
 
 
 
 
svg0729_3
Multiplane Demo
フラットテイストな風景も、SVG形式を取り入れることで遠近感のある描写を実現可能。ぜひいろいろな風景画で実装してみたいですね。
 
 
アイデア次第でもっといろいろな表現を可能にしてくれる、今までなかなか手を出せなかったという方もこのまとめを参考に一度取り入れてみてはいかがでしょうか?

The Benefits of SVG Images in Web Design

posted 03:11  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る