SVGで画像やアイコンをレティナ対応！

仁木

2016/09/30

対応ブラウザ
１．<IMG>タグを使う
２．<SVG>タグを使う
色を変えてみましょう
外部ファイルの作成
PHPファイルに読み込ませる
SVGを呼び出す

こんにちは、仁木です。
最近までレティナ対応のことをあまり知らなかったので色々と画像やアイコン回りのことを調べています。
今回はそのうちでSVGデータについて導入編のような感じで紹介したいと思います。

SVGとは

SVGとは「Scalable Vector Graphics」を略した言葉で、ベクター形式で作成されたグラフィックを表示する技術やファイルの形式のことを指します。

これまではWEBサイトで画像を表示させる時はJPGやPNG、GIFといったビットマップ(ラスター)画像で表示させることが一般的でしたが、数年前からAppleがレティナ対応のiPhoneやMacを発表するなど、高解像度のディスプレイが普及しだしたことによりSVGのベクター形式での画像の表示が使われることが増えてきました。

SVGの利点は、拡大・縮小による画像の劣化がないために、高解像度のディスプレイで表示するときに別で解像度の大きい画像を用意する必要がありません。逆にデメリットとしては、imgタグでの画像表示よりもコードが随分と長くなってしまいます。(ただしsvgファイルもimgタグを使って簡潔なコードで表示させることは出来ます。)
また、写真や複雑なイラストなどベクターデータで扱うのが不向きな画像はSVGでは表現できないです。

対応ブラウザ

SVGはCan I Useの調べでは現在はほぼ全てのブラウザが使用できます。IE8以下のみ非対応となっています。ただアニメーションなど、インタラクティブな部分もということになるとブラウザごとにバラつきがあるので使用の際はお気をつけください。

2016-09-30_15h44_50

SVGを使ってみる

SVGを表示させるにはいくつかの方法がありますが、今回は<IMG>タグを使用した方法と<SVG>タグを使用した方法を紹介したいと思います。

１．<IMG>タグを使う

IMGタグを使ってSVGファイルを読み込んで表示させます。はじめにillustoratorでベクター形式で作成された画像を用意しましょう。別名保存してファイル形式をSVG(svg)にします。作成されたSVGファイルを<IMG>タグを使って読み込ませます。

<b>結果</b>

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”WGEyxx” default_tab=”html,result” user=”toshitaka”]See the Pen <a href=’http://codepen.io/toshitaka/pen/WGEyxx/’>SVG inline IMG</a> by Toshitaka Niki (<a href=’http://codepen.io/toshitaka’>@toshitaka</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

この方法だと従来のやり方で表示が出来るのでわかりやすいですね。

２．<SVG>タグを使う

<SVG>タグを使ってSVGファイルを読み込んで表示させるのでなく、ベクターデータのパスを直接HTMLに記述して表示させます。はじめに先ほどと同様にillustoratorでベクター形式で作成された画像を用意しましょう。
そこから別名保存してファイル形式をSVG(svg)にします。ここで保存の際に「SVGオプション」というウィンドウが出てきますが、下の方にある「SVGコード」のボタンをクリックします。

2016-09-30_13h39_34

するとテキストエディタが起動して画像のSVGコードを生成してくれます。このコードを丸ごとHTMLファイルにコピーペーストしてください。

結果
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”qaXKRQ” default_tab=”html,result” user=”toshitaka”]See the Pen SVG inline SVG by Toshitaka Niki (@toshitaka) on CodePen.[/codepen_embed]

これでも同じように表示されます。もちろんどちらの方法でも拡大・縮小による劣化はありません。

また注意点として、

SVGの書き出しはillustratorのアートボードのサイズで書き出されるので、アートボードのサイズは書き出す画像がサイズいっぱいになるように合わせてください。
非表示にしているレイヤーも一緒に書き出されるので不必要なレイヤーやオブジェクトは消してしまいましょう。
テキストやパスはアウトライン化します。

色を変えてみましょう

SVGで表示される画像やアイコンは、CSSで背景色や線の色を変えることも出来ます。
線の色は”stroke”、背景色は””fill”を使います。

結果
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”BLdqPL” default_tab=”html,result” user=”toshitaka”]See the Pen SVG change Color by Toshitaka Niki (@toshitaka) on CodePen.[/codepen_embed]

複数のSVGコードをまとめる～SVGスプライト

上記のHTMLコードで気になるのは画像を３つ表示させているだけでコードがとても長くなってしまっています。そこで外部ファイルに仕様するSVGのパスを記述して使いたい場所に記述する方法を紹介します。

外部ファイルの作成

まずは例として、「test.svg」という外部ファイルを用意します。
このファイルの中に<SVG>タグと<SYMBOL>タグを記述します。タグにそれぞれのSVGコードの個別IDを与えて呼び出すという形式になります。

[html]<svg class="test">
<symbol id="test-icon1" viewBox="0 0 497.7 506.5">
<!– ここにSVGコードが入ります –>
<symbol>

<symbol id="test-icon2" viewBox="0 0 318.4 345.3">
<!– ここにSVGコードが入ります –>
<symbol>
</svg>[/html]

<SYMBOL>タグに記述されている”viewbox”とは<SVG>タグの座標位置とサイズを指定しているものです。これもSVGのコード生成時に記述されているのでそれぞれコピーペーストしてください。数値は左から”x座標”,”y座標”,”幅”,”高さ”です。

PHPファイルに読み込ませる

上記の「test.svg」を読み込ませましょう。PHPの場合は<body>の直下に以下のコードを記述します。

[php]<?php include_once("test.svg"); ?>[/php]

HTMLの場合はsvgファイルの中身のコードをそのまま<body>直下にコピーペーストしてください。

SVGを呼び出す

画像、アイコンを表示したい場所に<SVG>タグを記述してタグ内に<USE>タグを入れ、IDを指定して任意の画像を呼び出します。

[html]<svg class="icon icon-twitter1">
<use xlink:href="#test-icon1"/>
</svg>[/html]

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”ALodNP” default_tab=”html,result” user=”toshitaka”]See the Pen SVG change Color by Toshitaka Niki (@toshitaka) on CodePen.[/codepen_embed]

これでコードが随分とスッキリするかと思います。

SVGいかがでしょうか、今回は導入部分の紹介をさせてもらいましたが以降の記事で自身の勉強も兼ねて少しづつ踏み込んだ内容も書いて行きたいと思います。