Now Loading...
menu
  • すべて
  • web制作
  • 写真を楽しむ
  • カメラで遊ぶ
  • モノ
  • 旅
  • おすすめツール

useタグとsymbolタグを使ってsvgを使いまわしてみた。

useタグとsymbolタグを使ってsvgを使いまわしてみた。

FontAweosomeは本当に便利。

でも使ってるのって結局SNSのアイコンだけだったので、自分で画像を用意することにしました。

 

PC版で画面左端にそっと出て来る、SNSシェアボタン。

これをsvgにします。hoverさせたときに色を変えたい。

 


cssでアニメーションさせたり色を変えたりできるsvg

svgならばfill属性によって色を変えられるので、cssでhoverやアニメーションが簡単に実装できるのが◎。

FontAwesomeみたいに、色を変えたり、出したいところに出したり。

サイズを変えてもガジガジしません。

 

でも、imgタグでsvgを読み込むとアニメーションしたり色を変えたりできないんです。普通の画像と同じじゃないか。

 

そこで、インラインで書くことにしたのですが・・

インラインで書いてしまうといろんなファイルに直書きすることになり、ソースが長くなってしまうのがちょっと・・。

管理が大変そうなんですよね。

どうしよう。。

 


メンテナンス性を考えて、一箇所にまとめたい

ヘッダやフッタなどの共通パーツは別ファイルに分離して読み込む、ということをしています。

なにか変えたいときは、1ファイルだけを更新。

管理面で効率が良い!

svgファイルも、この方法でなんとかしたい。

 


同じsvg画像を使い回したい

というわけで、svgファイルもインクルードすることにしました。

1度svgタグを定義しておけば、表示させたいところで使い回しできるようになります。

 

作るときの作業はちょっとめんどくさい!ですが、ファイルを分けておくことで、後々の管理は楽になります。この一手間で、場所によって色や動きも変えられるし、こちらの方が便利かな。

 


いざ、実装。

やることがたくさん・・ざっくり分けると3つの作業です。

順を追ってひとつずつ。

やることリスト
1.svgファイルを作成する。これが呼び出し元。
2.svgファイルをインクルード
3.呼び出したいファイルにuseタグを記述

 

svgファイルを作成します。不要なものは削除して綺麗にします。

このファイルが呼び出し元となります。

 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-icon">
 <!-- FACEBOOK -->
 <symbol id="icon-facebook" viewBox="0 0 32 32">
  <g id="icon-facebook">
   <path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
  </g>
 </symbol>
</svg>

 

呼び出すときのためにidを付与。

svgファイルを読み込んでいる箇所に余白ができてしまうので、svgタグにsvg-iconというクラスをつけ、cssでdisplay:noneにしています。

 

次。svgファイルをインクルードします。

呼び出したいファイルのソースはこんな感じです。

 

<svg class="flownavi-icon-facebook" x="0" y="0">
 <use x="0" y="0" xlink:href="#icon-facebook"></use>
</svg>

 

これをcssで装飾します。

 


参考にさせていただいた記事

すごくわかりやすかったです!勉強になった。ありがとうございました・・!

SNSシェアボタンのUIデザイン改善メモ

SVGをuseタグで使いまわす

symbolタグとuseタグを使って、好きなところにSVGを表示しよう!

 

SNSボタンで使っているsvg画像は、こちらを使わせていただいてます。

IcoMoon

 

今回はSNSボタンのみ実装しましたが、ロゴなどにも使えそう。

↓ 下に整列しているこのボタンくんたちもsvgで呼び出しています。

 

 

share on

TIPS&NOTE TOPへ