ここで読み込まないとChromeでエラーがでるのだとか。まとめたコードを記述し、必要な箇所で呼び出しても表示されますよ。SVGを呼び出すアイコンを表示したい箇所に以下のコードを記述します。タグにクラスを付けて、CSSで装飾できるようにします。読み込んだ外部ファイルはテキストとして表示はされませんが、その部分に空白が挿入されてしまいます。none;}あとはお好みに装飾するだけ。使うことを覚えておきましょう。CodePen.CSSやフィルター次第で、様々な表現が可能に!え?なんだかめんどくさい?ここまでの作業はテンプレート化しておいたり、慣れちゃえば難しくはないのですが、めんどくさそうと感じた方に朗報!IcoMoonというサイトではお好みのアイコンを選択し、画面下の「SVG」というボタンをクリックすればSVGスプライト用のファイルがダウンロードできます!ただ、このサイトで使えるアイコンは限られていますし、オリジナルアイコンを使う場合は、やはり上記のやり方を覚えておくといいかなーと思います。今回は基本的な扱い方や、便利なSVGスプライトの紹介となりましたが、これにJavaScriptと組み合わせればさらにおもしろい効果を表現できます。pmこのブログのフッターの画像だけSGVなんですね。pmフィルターの部分なんですが、MacのFirefoxでマウスオーバーすると下2/3ほどが消えてしまいます。widthやheight、viewboxといった表示範囲を指定する属性が抜けていたからだと思われます。修正しましたのでご確認ください。ご指摘ありがとうございました!ニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。