アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう

2014年7月3日
SVG

ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。

↑私が10年以上利用している会計ソフト！

2014年7月3日追記：SVGスプライトの書き方について修正＆追記しました。

SVGってなに？

SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。

svgとJPEG、PNGの比較

Appleがレティナディスプレイを発表して以来、デザイナー達は画像をどのように高解像度ディスプレイに対応させるか、頭を悩ませてきました。SVGはその解決策となり得るでしょう。二倍のサイズのJEPGやPNGを用意して、実寸サイズに縮小する必要はありません。

SVGに対応しているブラウザー

以下のブラウザーでサポートされています。古いブラウザーに対応する機会も減ってきていると思うので、これからどんどん実用化されるのでは？と思います。

Internet Explorer 9以上
Firefox 3.0以上
Chrome 4.0以上
Mac OS X Safari 3.2以上
Opera 9.0以上
iOS Safari 3.2以上
Androidブラウザ 3.0以上

さよなら、アイコンフォント

アイコンフォントとは、フォントの1文字にテキストではなくアイコンが割り当てられたフォントのこと。こちらもベクター画像として扱える上、IE8以下の古いブラウザーにも対応しているため、高画質ディスプレイに対応させるため多くのデザイナーが採用してきました。Webクリエイターボックスでも過去にアイコンフォントについて「アイコンフォントでリンクタイプ別にアイコンつける方法」という記事内で紹介しています。

しかし欠点があり、アイコンを表示させるためにソースに意味を持たないアルファベットを書かなければならず、万が一フォントファイルがうまく表示されなかった場合、そのアルファベットが表示されてしまいます。またフォントと同じ扱いとなるため、単色しか使えません。新しくアイコンフォントを追加したり、アイコンの修正をする作業は、何かと手間がかかるのも難点でした。

そこで再度注目され始めたのがSVGです。どのように表示していくのか、みてみましょう。

SVGで画像を表示してみよう

画像を表示するには二通りの方法があります。

1. img タグで表示

save-svg

まずはIllustratorでロゴ画像を用意。保存する際に別名保存を選び、ファイル形式をSVGにすればOK。

<img src="images/logo.svg" alt="ロゴ">

作成されたSVGを img タグで記述します。

See the Pen Logo SVG by Mana (@manabox) on CodePen.

拡大しても劣化しませんね。

2. コードをインラインで記述して表示

svgコードを表示

他にもHTML文書に直接コードを書き込めます。先ほどと同じようにIllustratorで保存する際に表示されるダイアログで「SVGコード」ボタンをクリックしましょう。ながーいコードが表示されます。これがSVGです。このコードの <svg>〜</svg> をコピーしてHTML文書にペーストすると…

See the Pen SVG inline image by Mana (@manabox) on CodePen.

このように表示されます。意外と簡単ですね！

フィルターを使ってみる

ぼかしや色調の変更等、様々なフィルターが用意されています。例として、ロゴにカーソルをあわせるとぼかしを入れてみましょう。まずは svg にIDを与えます。Illustratorからコードをコピペした場合、デフォルトは「Layer_1」になっていると思うので、わかりやすいIDに変更します。ここでは「logo」というIDに変更しました。次に filter タグを <svg>〜</svg> の中に挿入します。feGaussianBlur はぼかしを、stdDeviation はぼかしの強度を表します。

<svg version="1.1" id="logo" .....>

  <filter id="pictureFilter" >
    <feGaussianBlur stdDeviation="3" />
  </filter>

</svg>

続いてCSS。hover すると「pictureFilter」というIDのついたフィルターを実装するよーという意味ですね。ここで使った「pictureFilter」もデフォルト値なので、お好みのIDに変更してもOKです！

#logo:hover {
  filter: url(#pictureFilter);
}

See the Pen SVG blur filter by Mana (@manabox) on CodePen.

こんな感じでフィルターがつきました！

See the Pen SVG fractal noise filter by Mana (@manabox) on CodePen.

上記は別のフィルターに変更したところ。カーソルをあわせると歪みます。フィルターは他にもいろんな種類があります。Hands On: SVG Filter Effectsではデモとともにコードが紹介されているので、参考にしてみてください（コードは画像の下に表示されます）。

複数のSVGをコンパクトにまとめて表示

追記：よりよい書き方があったので修正＆追記します。

SVGをインラインで表示するにあたり、長いコードがどうもお気に召さない方もいらっしゃるかと思います。私もそうでしたw ひとつ、ふたつならまだしも、多くのアイコンを使いたい場合、もう少しスッキリ表示したいですよね。そこでいろいろ調べたところ、「Icon System with SVG Sprites」という記事で方法が紹介されていました。SVGスプライトと呼ばれているようですね。さっそく試してみたいと思います。

1. 複数のSVGをひとつのファイルにまとめる

まず、長いコードをまとめる外部ファイルを作成します。ここでは「svg-defs.svg」というファイル名にしました。このファイルの中には svg タグ、~~defs タグ（defines＝定義する）、g タグ（group＝グループ）~~ symbol タグを記述します。そのうちの symbol タグにそれぞれ個別IDを与え、このIDを呼び出すことになります。

さらに symbol に viewBox 属性も記述。これは各SVG固有の、座標位置やサイズを定義するものです。左からx座標、y座標、幅、高さの順に書きます。Illustrator等、描画ツールからSVGを出力した場合、冒頭に書かれている <svg ... viewBox="5, 5, 30, 40" ...> というコードが見つけられると思うので、こちらを symbol に記述。

<svg class="defs">
    <symbol id="icon1" viewBox="34.7 0 89.1 94">
      <!-- ここにSVGコードが入ります -->
    <symbol>

    <symbol id="icon1" viewBox="9 0 35.2 21.8">
      <!-- ここにSVGコードが入ります -->
    <symbol>
</svg>

2. 作成した外部ファイル読み込む

PHPの場合、単純に include_once で読みこめばOK。記述場所は <body> 直下です。ここで読み込まないとChromeでエラーがでるのだとか。

※今回はPHPを使った外部ファイルの読み込み方法を紹介しますが、もちろんHTMLで <body> 直下に 1. でまとめたコードを記述し、必要な箇所で呼び出しても表示されますよ。

<body>
<?php include_once("svg-defs.svg"); ?>

3. SVGを呼び出す

アイコンを表示したい箇所に以下のコードを記述します。use タグでは 1. で与えたIDを記述。svg タグにクラスを付けて、CSSで装飾できるようにします。

<svg class="icon icon-twitter1">
  <use xlink:href="#twitter"/>
</svg>

4. CSSで装飾

2. で読み込んだ外部ファイルはテキストとして表示はされませんが、その部分に空白が挿入されてしまいます。なので、外部ファイルの svg を display: none; で消しちゃいます。

.defs{
  display: none;
}

あとはお好みに装飾するだけ。全体を塗りつぶすには color や background-color ではなく、fill を使うことを覚えておきましょう。

.icon {
  width: 100px;
  height: 100px;
  fill: #55acee;
}

See the Pen SVG Sprite by Mana (@manabox) on CodePen.

CSSやフィルター次第で、様々な表現が可能に！

え？なんだかめんどくさい？

ここまでの作業はテンプレート化しておいたり、慣れちゃえば難しくはないのですが、めんどくさそうと感じた方に朗報！IcoMoonというサイトではお好みのアイコンを選択し、画面下の「SVG」というボタンをクリックすればSVGスプライト用のファイルがダウンロードできます！ただ、このサイトで使えるアイコンは限られていますし、オリジナルアイコンを使う場合は、やはり上記のやり方を覚えておくといいかなーと思います。

今回は基本的な扱い方や、便利なSVGスプライトの紹介となりましたが、これにJavaScriptと組み合わせればさらにおもしろい効果を表現できます。今後も少しずつそういった記事を増やしていければと思います！

Chih Woo より:

2014年6月6日 10:58 am

やっペー
これ超勉強になりました！！

hatohaco より:

2014年6月25日 5:24 pm

このブログのフッターの画像だけSGVなんですね。

mkismy より:

2014年7月3日 2:00 pm

フィルターの部分なんですが、MacのFirefoxでマウスオーバーすると下2/3ほどが消えてしまいます。何か原因はお分かりでしょうか

長坂断より:

2014年7月3日 4:41 pm

私はSVGをサイト上の図説に使っています
これをiPadで拡大表示して、急遽のプレゼンに利用しています
http://ezj.jp/

Webクリエイターボックスより:

2014年7月4日 10:50 am

Firefox…見落としていました！原因は冒頭の svg タグ部分に widthやheight、viewboxといった表示範囲を指定する属性が抜けていたからだと思われます。修正しましたのでご確認ください。ご指摘ありがとうございました！