SVGベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか?SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。追記:SVGスプライトの書き方について修正&追記しました。Graphics)はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。Appleがレティナディスプレイを発表して以来、デザイナー達は画像をどのように高解像度ディスプレイに対応させるか、頭を悩ませてきました。SVGはその解決策となり得るでしょう。二倍のサイズのJEPGやPNGを用意して、実寸サイズに縮小する必要はありません。以下のブラウザーでサポートされています。古いブラウザーに対応する機会も減ってきていると思うので、これからどんどん実用化されるのでは?と思います。3.0以上さよなら、アイコンフォントアイコンフォントとは、フォントの1文字にテキストではなくアイコンが割り当てられたフォントのこと。こちらもベクター画像として扱える上、IE8以下の古いブラウザーにも対応しているため、高画質ディスプレイに対応させるため多くのデザイナーが採用してきました。Webクリエイターボックスでも過去にアイコンフォントについて「アイコンフォントでリンクタイプ別にアイコンつける方法」という記事内で紹介しています。欠点があり、アイコンを表示させるためにソースに意味を持たないアルファベットを書かなければならず、万が一フォントファイルがうまく表示されなかった場合、そのアルファベットが表示されてしまいます。フォントと同じ扱いとなるため、単色しか使えません。新しくアイコンフォントを追加したり、アイコンの修正をする作業は、何かと手間がかかるのも難点でした。そこで再度注目され始めたのがSVGです。どのように表示していくのか、みてみましょう。SVGで画像を表示してみよう画像を表示するには二通りの方法があります。タグで表示まずはIllustratorでロゴ画像を用意。保存する際に別名保存を選び、ファイル形式をSVGにすればOK。CodePen.拡大しても劣化しませんね。他にもHTML文書に直接コードを書き込めます。先ほどと同じようにIllustratorで保存する際に表示されるダイアログで「SVGコード」ボタンをクリックしましょう。ながーいコードが表示されます。CodePen.このように表示されます。意外と簡単ですね!フィルターを使ってみるぼかしや色調の変更等、様々なフィルターが用意されています。例として、ロゴにカーソルをあわせるとぼかしを入れてみましょう。Illustratorからコードをコピペした場合、デフォルトは「Layer_1」になっていると思うので、わかりやすいIDに変更します。ここでは「logo」というIDに変更しました。ぼかしの強度を表します。</filter></svg>続いてCSS。すると「pictureFilter」というIDのついたフィルターを実装するよーという意味ですね。CodePen.上記は別のフィルターに変更したところ。カーソルをあわせると歪みます。フィルターは他にもいろんな種類があります。Effectsではデモとともにコードが紹介されているので、参考にしてみてください(コードは画像の下に表示されます)。追記:よりよい書き方があったので修正&追記します。SVGをインラインで表示するにあたり、長いコードがどうもお気に召さない方もいらっしゃるかと思います。ひとつ、ふたつならまだしも、多くのアイコンを使いたい場合、もう少しスッキリ表示したいですよね。Sprites」という記事で方法が紹介されていました。SVGスプライトと呼ばれているようですね。試してみたいと思います。複数のSVGをひとつのファイルにまとめるまず、長いコードをまとめる外部ファイルを作成します。ここでは「svg-defs.svg」というファイル名にしました。タグにそれぞれ個別IDを与え、このIDを呼び出すことになります。これは各SVG固有の、座標位置やサイズを定義するものです。左からx座標、y座標、幅、高さの順に書きます。