SVGを使おうと思っているけど、親しみやすいpng画像をついつい使ってしまうという人は多いのではないでしょうか。私もSVGはロゴで使っているくらいで、あとはアイコンフォントで簡単に表示させているのが現状です。
しかし、SVGはとても魅力的にサイトを演出するデザイン要素であり、今後積極的に活用されていくことが予想されます。そこで今回は、SVGでどのような演出ができるかを37個のサンプルでご紹介します。これから始めてみようとしている方はぜひ参考にしてみてください。
SVGについて
SVGのサンプルをご覧いただく前に、少しだけSVGについて説明しておきます。
SVGは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、pngなどのビットマップ形式の画像ではなくベクター形式の画像で、イラストレーターで作成される画像形式と同じになります。ベクター形式ということは編集可能でもあるので、後ほど編集できるのが特徴的。
また、iPhoneなどのレティナディスプレイでもきれいに表示させることができるので、いちいち2倍サイズの画像を用意して…といった手間も省けます。
SVGのメリット
- ベクター画像形式で、フォントサイズやフォントカラーなどCSSデザインができる（後からも）。
- レティナディスプレイに対応。
- SVGをCSS3で動かしたり、透過させたり、ぼかしをかけたりできる。
SVGの作成方法
SVGの作成方法は簡単です。
まず、イラストレーターで表示させたいベクター画像を作成し、画像をアウトライン化しておきます。
※アウトライン化しておかないと、CSSで設定しているフォントが反映されてしまいます。
imgで表示させる
<img src="images/logo.svg">
我々が親しんでいるこのimgタグで表示させる場合、svg形式の画像ファイルを作成する必要があります。
先ほど作成した画像を『ファイル』→『別名で保存』でファイル形式をSVGに設定し、保存するだけでSVGファイルは完成です。
xmlデータで表示させる
イラストレーター上で先ほど作成した画像をコピーし、テキストエディタなどにペーストすると以下が表示されます。
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="217.6px" height="71.4px" viewBox="0 0 217.6 71.4" style="enable-background:new 0 0 217.6 71.4;"
xml:space="preserve">
<defs>
</defs>
<g>
<path d="M31.1,34.2c15.7-4.4,23.3-15.3,23.4-21.5C51.5,1.6,34.3,0.2,21,10.3l-4.1-5.7C33.6-4,57.8-1,61,17.2
c-5,8.9-12.4,15-22.5,17.8l0.2,0.6c9.2,0,18.6,7.5,15,17.7C46.6,73.3,19.2,75.4,0,65.6l0.9-2c4.8,2.3,9.7,3.7,14.5,4.3l-3.8-3
L32.7,5.6l6,3.2L17.4,68.2c13.7,1,25.8-5.1,29.9-16.8c3.1-8.8-4.3-14.3-14.5-12.3L31.1,34.2z"/>
<path d="M76.6,36.2c0,0-2.4,4.4-5.3,12.1l0.3,0.1c3.2-5.1,10.5-14.9,12.6-16.4c1.4-1,2.9-1.1,4.3,0s2.4,2.4,3.1,3.7
c2.7,4.8-4,11.1-10,12.7c-0.5-0.4-0.8-1.1-0.8-1.1c4.8-2.9,6.3-8,5.6-13.2c-7.9,5.8-14,15.1-19.3,26.7c-1.1,3.3-2.2,6.7-3.3,10.6
L58,66.5l12.9-35.2L76.6,36.2z"/>
<path d="M122,54.2c-1.5,4.1-2.5,9.9-2.5,14.3c8.3-4.2,14.8-10.4,20.5-17.6l1.2,0.6c-5.2,7.5-12,14.6-20.1,19.9
c-7.1-2-8.1-9.7-4.8-18.8l-0.5-0.3c-3.8,6.6-8.8,12.3-16.2,18.4c-6.7-2.4-8.8-9.6-6.9-16.5c1.9-6.8,8.6-23.7,8.6-23.7l5.4,4.9
c0,0-5.3,14.8-6.7,18.8c-1.5,4.1-2,9.9-2,14.3c10.9-7.7,17.9-18.4,22.5-30.4c1.5-4.3,2.8-7.6,2.8-7.6l5.3,4.9
C128.6,35.4,123.4,50.2,122,54.2z"/>
<path d="M151.4,35.9c0,0-7.9,17.9-10.4,24.3l0.5,0.4c5.7-10.4,14.2-21.6,21.9-28.6c0.9-0.8,3-1,4.2,0c0.7,0.6,3.3,3.1,3.5,3.3
c1.3,1.3,1.8,3.4,1,5.2c-2.2,4.9-4.8,11.5-6.2,14.6c-1.9,4.5-3.3,9-2.7,13.4c8.4-4.2,14.8-10.4,20.5-17.6l1.2,0.6
c-5.2,7.6-12,14.7-20.1,19.8c-6.4-2.9-10-9.1-7-16.1c1.9-4.5,5.8-13.3,8-18.9c0.4-0.9,0.3-1.7-0.2-1.7c-3.8,0-24.6,27.3-26.6,36.8
l-6.1-4.9l12.7-35.2L151.4,35.9z"/>
<path d="M209.1,36.1c0.1,4.1-0.3,8.3-0.9,11.7c2.1,0.8,5.2,0.9,9.4,0l-0.9,1.7c-3.4,0.8-6.4,0.6-8.8-0.2c-3,12.6-11,20.1-20.4,22
c-16.2-11.8-5.7-33.5,8.3-40.1l4.1,6.6c-11.5,4-17.8,19.5-13.3,30.7c8.5-2.4,15.9-10,19.2-20c-5.4-3-6.9-9.7-2-15.8l2-1.4
L209.1,36.1z M207.6,37.9c-3.6,2.5-3.5,6.7-1.3,8.8C207.1,43.9,207.5,41,207.6,37.9z"/>
</g>
</svg>
これがSVGのxml形式データ。このままHTML上に記述すると以下のように表示されます。
と、意外と簡単にSVGを用意することができるのです。あなたも導入してみたくなりましたか？
SVGの魅力が分かるサンプル37個のご紹介
SVGについてご理解いただけましたら、実際にSVGでどのようなことができるのか、サンプルを37個ご用意しましたのでご覧ください。
See the Pen SVG Low PolyLion: Animated Polygons by GRAY GHOST (@grayghostvisuals) on CodePen.
ポリゴン
こういったイラストもSVGでリアルに表現できるのですよね。すごい！これを表現するのにHTMLが大変なことになってますね…。いきなり飛ばしすぎたかな。
See the Pen Elastic SVG Sidebar Material Design by Nikolay Talanov (@suez) on CodePen.
ナビゲーションの演出
縦の白いバーを右にドラックしてみてください。ナビゲーションが現れます。SVGやJSを使って演出されていて、こういった表現はおもしろいですよね。
See the Pen Elastic stroke CSS + SVG by yoksel (@yoksel) on CodePen.
テキストのアニメーション
テキストのアニメーションはSVGファイルの魅力の一つですね。こういったアウトラインの動きはメインビジュアルで使っていきたいところ。ロゴでもいいかな。ポイントで使うと効果的に表現できそうですね。
See the Pen SVG text mask by Marco Barría (@fixcl) on CodePen.
透過テキスト
テキストを透過させて背景画像になじませています。こういう表現もおもしろいですよね。ヘッダー画像にこのスタイルを適用すれば自然なデザインを作り上げることができそうですね。しかも、テキストが変更できるので、その点でも便利です。
See the Pen Login/Logout animation concept by Nikolay Talanov (@suez) on CodePen.
フォームのアニメーション
フォームを入力してからのアニメーションの演出がおもしろい。コーポレートサイトでは使用できなさそうですが、こういうフォームはどんどん増えていっていいと思う。
See the Pen SVG Animation Experiment by Hamish Williams (@HamishMW) on CodePen.
送信アニメーション
こちらもフォーム関連のアニメーション。送信ボタンもここまでユニークだと「押したかいがあるな。」と思わせてくれますw
See the Pen SVG Balloon Slider by Chris Gannon (@chrisgannon) on CodePen.
ボリュームナビゲーション
動画のボリュームなどで使用されているナビゲーション？にも、このようなアニメーションが施されていると、動画に集中できなさそうです。
See the Pen SVG Circle Progress by Jon Christensen (@JMChristensen) on CodePen.
サークルのアニメーション
サークルの下にある入力フォームに数字（0〜100）を入力してみてください。アニメーションして表示してくれます。使い所が分からないですけど、どこかにあるはず…。たぶん
See the Pen X-ray me (SVG Experiment) by Noel Delgado (@noeldelgado) on CodePen.
透けるアニメーション
おもしろ系のSVG画像。人間のキャラクターにフォーカスを当てると透けて表示されます。
See the Pen SVG clip-path Hover Effect by Noel Delgado (@noeldelgado) on CodePen.
フォーカスを当ててコンテンツを表示させる
先ほどと同じスタイルですが、こちらはフォーカスを当ててコンテンツを表示させる形式のもの。これは使いどころがありそう。フォーカスを当てると表示される写真とか。あまり需要は…ないかなw
See the Pen SVG Loaders by Zach Schnackel (@zslabs) on CodePen.
ローディングアイコン1
ローディング画像もさまざまな表現ができるようになりましたね。
See the Pen SVG Loading icons by Aurer (@aurer) on CodePen.
ローディングアイコン2
こちらもローディングアイコン。ちょっと慌ただしいですが、使い所は結構ありますね。
See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.
ローディングアイコン3
SVGでは、ローディングアイコンの需要が多いのかな。今回探している時にいろいろと見つけましたよ。まぁ、作りやすいですからね。
See the Pen SVG Social Media Icons by Ruandre Janse Van Rensburg (@ruandre) on CodePen.
ソーシャルアイコン
ソーシャルアイコンもSVGで。サイズもカラーも簡単に変更できるから、1ページで色々なスタイルで表示させたい場合に良いですよね！
See the Pen Inline SVG hamburger animation by Chris Wright (@chriswrightdesign) on CodePen.
ハンバーガーメニュー
ハンバーガーメニューのアイコンもSVGで。まぁ、この辺はすぐに実装できそう。
See the Pen Interactive SVG Info Graph by Chris Gannon (@chrisgannon) on CodePen.
グラフ表示アニメーション
業績などをグラフで表現する際にいいのではないでしょうか！実際の数値を入力して表示しているので、白い点をドラッグするとちゃんと数値も表示されます。結構手が込んだグラフですね。
See the Pen SVG Clock by Mohamad Mohebifar (@mohebifar) on CodePen.
時計アニメーション
実際の時刻を表示する時計アニメーション。これは凄い！
See the Pen SVG Pie Timer by Anders Grimsrud (@agrimsrud) on CodePen.
グラフアニメーション1
時計ができるのだから、こういうのも表示できますよね。
See the Pen SVG Pie chart with tooltip and hover effects by Hiro (@githiro) on CodePen.
グラフアニメーション2
カーソルを当てるとグラフの内容が表示されます。
See the Pen Lights out svg icon by Hendry Sadrak (@hendrysadrak) on CodePen.
クリックアクション
クリックする度に、カラーが変わります。こういうスイッチもどこかで使えそうですね。
See the Pen SVG Twitter Broken Heart by Chris Gannon (@chrisgannon) on CodePen.
シェアボタン
シェアボタンをこちらに変えてみては！2回クリックしてみてください。ユニークですね。
See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.
遊園地アニメーション
これがXML形式で作成したアニメーションです。JS無しのようですよ。
See the Pen Interactive SVG Toast by Chris Gannon (@chrisgannon) on CodePen.
トースターアニメーション
トースターの右側にあるレバーを下にドラッグしてみてください。ユニークなアニメーションが始まります。
See the Pen 150 Animated SVG Icons by Joe Howard (@jhoward) on CodePen.
アニメーションアイコン
こういうアイコンであれば、即実装できそうですね。アニメーションもシンプルですし。
See the Pen SVG mask + video by Svante Richter (@SahAssar) on CodePen.
マスクをつけた動画
動画の上にこういうマスクを付けて表示させるのはおもしろいアイデア！動画はこれからどんどん使用されていくかなと思うので、アレンジ方法はメモしておこう…
See the Pen SVG Page Hopper by Chris Gannon (@chrisgannon) on CodePen.
コンテンツスライダー用ナビゲーション
コンテンツスライダーのナビゲーションにぜひ使ってみたいアニメーションですね。シンプルながらちょっとユニーク、このくらいが使いやすい。
See the Pen SVG Kiosk Icon Menu by Chris Gannon (@chrisgannon) on CodePen.
アイコンメニューアニメーション
少々タメがある動きがおもしろいアイコンアニメーション。ずっとクリックしてしまう…。
See the Pen SVG Path animated Text by Tamino Martinius (@Zaku) on CodePen.
メインビジュアル用テキストアニメーション
こういうアニメーションも実装できるようになるのですね。さすがにこれはハードル高そう…。
See the Pen Menu toggle svg animation by Tamino Martinius (@Zaku) on CodePen.
ハンバーガーメニュー
なめらかな動きのハンバーガーメニューだと、ちょっと高級感も感じられたりしますね。
See the Pen CSS/SVG Animated Circles by Kyle Edwards (@kyledws) on CodePen.
グラフアニメーション
自身のスキルを表現する時にこういうアニメーションが欲しかったりしますよね。ポートフォリオサイトでも使えそう。
See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.
イラストアニメーション
ここまでくると、どうやってアニメーションさせているのか、分かりません…w
See the Pen Search Input animation by Nikolay Talanov (@suez) on CodePen.
検索フォームアニメーション
なめらかなアニメーションで検索フォームを表示してくれます。<input>で記述されているので、ちゃんと入力できるし送信も可能。あ、デモでは送信できないですけどね。
See the Pen SVG Burger Menu by Chris Gannon (@chrisgannon) on CodePen.
ハンバーガーメニュー
もうハンバーガーそのままじゃん！ユニーク系のサイトにいかがでしょうか。
See the Pen Animated writing font (SVG paths) by Lee Porter (@elevaunt) on CodePen.
テキストのアニメーション表現方法がユニーク
まずメインテキストにフォーカスが当たり、アニメーションが進むにつれてユニークに全体表示される。と、説明が難しいので実際にご覧ください。
使わない理由はなさそうですよね。これまで使ってこなかったみなさんも、来年こそはSVGを活用してみましょう！
![flexbox[CSS3]で実践的なレイアウトを。実際の現場で使うflexboxの4パターン](https://web-bruno.com/wp-content/uploads/2016/10/flexbox.png)
