イチオシのSVGフィルタ素材&チュートリアルのご紹介！

SVG(スケーラブル・ベクター・グラフィックス)は、普通の画像よりも優れています。画面の大きさに対応して拡大縮小しても、そのクオリティは変わらないからです。

 

また、SVGは画像だけではありません。画像を加工してカッコイイ文字を作るフィルタ機能もついています。今回は、とっておきのフィルタ素材とそのチュートリアルをご紹介します。

 

SVG Filters 101

 

まずはじめに、入門的な素材をご紹介しましょう。チュートリアルを参考に、独自のデザイン設計やさらなるSVGフィルタへの理解が深まります。

 

 

The Art Of SVG Filters

 

これはSmashing Magazineの手がけたSVGで、デザインに持ってこいのフィルタ素材です。あらゆる文字に適用可能な基本フォーマットも備わっています。

 

 

SVG Filters on Text

 

これも文字を加工するのにぴったりのSVG素材です。フィルタを作成するツールプロセスも、チュートリアル内で紹介されています。

 

SVG Drop Shadows

 

 

オブジェクトにドロップシャドウ効果をかけられるSVGです。フィルタの動作とコードを確認出来るので、好きなように修正することが出来ます。

 

SVG Blur Effects

 

先ほどと似ていますが、これはぼかし効果のあるSVGです。コードを修正し、デザインに合わせてオプションを変えていくことが可能です。

 

 

The Gooey Effect

 

クールでかっこいいデザインは、このチュートリアルでやり方が紹介されています。プロジェクトの人気も高まること間違いなしです。

 

 

SVG Filters

 

残念ながらチュートリアルは用意されていませんが、この素材リストもデザインに大変便利です。文字や画像などに適用可能なSVGがたくさん載っています。

 

Masked Blur Effect

 

マスクのかかった面白いぼかし効果のかけ方は、ここから学ぶことが出来ます。ヘッダーの見せ方を工夫すれば、益々面白いサイトになるでしょう。

 

 

Practical SVG Filters

 

このチュートリアルには、SVGとは何か、またその使い方が載っています。実践的なテクニックも盛り込まれているので、すぐにデザインに活用出来るでしょう。

 

SVG Light Source Filter Tutorial

 

ライト効果をかっこよくデザインに使いたかったら、このチュートリアルは見逃せません。3種類の方法を用いて、そのやり方が説明されています。

 

 

まとめ

 

デザインに深みを与えるには、SVGのフィルタ機能が欠かせません。また、タグを用いることによってDOMにも活用出来るので、ぜひチュートリアルを見てSVGの使い方をマスターしてください。