SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ

最近は海外だけでなく、日本でもSVGを使用しているサイトを見かけることが多くなってきました。SVGをアイコンやエレメントに使ったり、アニメーションと組み合わせた面白いエフェクトを取り入れたりなど、さまざまです。

いつかプロジェクトで使いたくなるようなSVGのチュートリアルをCodropsから紹介します。

Creating a Border Animation Effect with SVG and CSS
デモページ

パネルの四辺のボーダーにSVGを使って、さまざまなアニメーションのエフェクトを適用します。

SVG Drawing Animation
デモページ

ページを表示する際に、SVGでエレメントや画像などの輪郭をアニメーションで描画してから表示します。

Animated SVG Icons with Snap SVG
デモページ

ゴミ箱が開いたり、メールの封が開いたり、旗がゆらめいたり、矢印の向きが変わったりと、アニメーションで楽しませるSVGで作られたアイコン。

Animated Checkboxed and Radio Buttons with SVG
デモページ

SVGを使ったかわいいアニメーションでチェックできるチェックボックスやラジオボタン。

Shape Hover Effect with SVG
デモページ

画像の上にSVGでキャプション表示用のパネルを重ねます。パネルはパスを使って波線や斜めなど美しいデザインです。

Arrow Navigation Style
デモページ

スライダーに使う左右のアローに、SVGでさまざまなエフェクトを加えます。メインコンテンツよりナビゲーションが楽しくなりすぎないようにご注意をｗ

Inspiration for Inline Anchor Styles
デモページ

インラインのテキストリンクにSVGや疑似要素を使って、さまざまなホバーエフェクトを加えます。デザインが変わるものやリンク先の情報が表示されるものなど、かっこいいものから実用的なものまで。

A Collection of Separator Styles
デモページ

article, div要素などでコンテンツを区切る際に、SVGや疑似要素を使いさまざまな区切り線を描きます。

Dot Navigation Styles
デモページ

ドットを並べたナビゲーションに、14種類の繊細でかっこいいエフェクトを加えます。見た目はほとんど同じなのにアイデアが盛りだくさんです！

SVG Icons FTW

最後はSVGアイコンの実装方法。基本から、幅や高さの変更、カラーの変更、ストロークの変更、フィルターエフェクトの適用、さらに↑のように実際に動く時計まで。