PINTO!株式会社PLAN-Bの情報発信メディア

2018.08.07

山下 由依乃

WEB CREATION

目次
    1. Web制作で利用されるアイコンの種類
      1. アイコンの一例
      2. 画像アイコン
        1. .gifのメリット・デメリット
        2. .pngのメリット・デメリット
      3. アイコンフォント
        1. アイコンフォントのメリット・デメリット
      4. SVG
        1. SVGのメリット・デメリット
    2. 現在の主流はSVG!その理由は?
      1. スマートフォン・Retinaディスプレイといった複数タイプ&高解像度のディスプレイに対応可能
      2. ベクターデータであるということ
      3. 対応ブラウザの増加
    3. まとめ:SVGはフロントエンドエンジニアの悩みを解決してくれるとても便利なフォーマット

JPEG、GIF、PNG、BMP、TIF、 EPS…画像フォーマットは多々あります。Webサイトをコーディングする際には、使う画像とその目的に合わせて拡張子やサイズを選ぶことになります。

ホームページ上に画像を表示するためのフォーマットとして、これまでJPEG、GIF、PNGが多く用いられて来ましたが、ここ数年は、Web制作で使用する画像はSVGへと目まぐるしく切り替わってきました。すべての画像をSVG化!とまでいかなくとも、ロゴやアイコンをSVGで作成して読み込むサイトが増えています。

どうしてここまでSVGフォーマットが広まったのでしょうか?「アイコン」の表示をメインに、改めてその理由を振り返ってみます。


Web制作で利用されるアイコンの種類

アイコンは、サイトの中のワンポイントです。タイトルや項目の分類に使われます。

アイコンの一例

アイコン例

アイコンはサイトを楽しく表現したり、細部を彩るのと同時に、機能をひと目でわかりやすくする補助の役割を担います。ピクトグラムやシンボルマークが使われることが多く、曲線や中抜き(透過)が使われた画像が多くなります。このようなアイコンをWebサイトで使用する際には、主に下記の3パータンから選択します。

  • 画像アイコン
  • アイコンフォント
  • SVGアイコン

各パターンはそれぞれ下記のような特徴があります。

画像アイコン

Webサイトでは主にGIF、JPEG、PNGの3つのファイル形式が用いられます。インターネットが普及した当初からある一番ベーシックな表示形式です。アイコンに主に使われるのはその中でも「.gif」と「.png」になりますので、この2つの特徴を説明します。

使い分けとしては「色数の少ない要素は.gif」。「色数の多い場合、円形など透過部分の端処理(エッジ)を綺麗に出したい場合は.png」を用いることが多いです。

現在通信速度が上がり、小サイズの画像にも容量を使えるようになりましたので、これまでgifを使っていた表現もpngを使ってより鮮明な表示を行えるようになっています。

.gifのメリット・デメリット

[メリット]

  • データ容量が軽い。
  • アニメーションを比較的かんたんに作ることができる。
  • 透過ができる。(半透明は不可)

[デメリット]

  • 描画数が少ない(256色)ため、グラデーションや写真に不向き。
  • 曲線の描画に弱い。

.pngのメリット・デメリット

[メリット]

  • フルカラー(1670万色)を指定することができる。
  • 何度圧縮しても画質が劣化しない。
  • 透過ができる。(半透明も可)  

[デメリット]

  • IE8以下のブラウザ対応が必要。
  • gifに比べてデータ容量は重い。

アイコンフォント

アイコンフォントとは 「アイコン型のWebフォント」のこと。フォント1文字に対して、テキストではなくアイコン画像が設定されます。

配布サイトからフォントをダウンロード、ないしは CDN(外部からファイルを読み込んでサービスを利用する方式)を使って読み込みを行います。

アイコンフォントのメリット・デメリット

【メリット】

  • ベクターデータのため、Retinaディスプレイでも鮮明に表示される。
  • テキスト(文字)データであるため、画像を表示するよりも軽量。
  • IE8以下の古いブラウザにも対応。
  • CSS3を用いることで、サイズやカラーを簡単に変えることができる。
  • フォントなのでテキストとのベースラインが合わせやすい。

【デメリット】

  • アイコンフォントを表示させるために、ソース上に意味を持たない専用の文字列を書く必要がある。
  • 一部のブラウザでは、対応していない。(対応用コードが別途必要)
  • 配布元により設定方法が異なる。

SVG

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックスの略称)。

SVG自体は古くから存在していましたが、HTML5の普及とともに多くのブラウザでサポートされるようになりました。ベクター画像を表示する技術であり、拡大縮小を行っても画質が劣化しない特徴があります。

SVGのメリット・デメリット

【メリット】

  • ベクター画像である。
  • 解像度の異なる環境や印刷において高品質。
  • テキストエディタで開くことができ、画像編集アプリケーションを使用しなくても書き換えが可能。
  • アニメーションタグ、JavaScript、CSSによるアニメーションが可能。

【デメリット】

  • 点や形状の複雑なオブジェクトや線の集まりでは表現しきれない。
  • 写真のような沢山の画素を持つものには不向き。
  • 複雑さを増すほど表示速度が遅くなる。
  • 計算して描画処理を行うためデータ量が重たくなる。

現在の主流はSVG!その理由は?

ここまで、アイコンの表示に用いられる手法をご紹介しました。

それぞれメリットとデメリットがありますが、文頭で記した通り、その中でも近年ロゴやアイコンの表示はSVGが使われる事が多くなってきました。これまで画像やアイコンフォントで行ってきたことを、SVGで行っていくその利点とはなんでしょうか?

スマートフォン・Retinaディスプレイといった複数タイプ&高解像度のディスプレイに対応可能

SVGが広まっている一つの理由に、レスポンシブサイトの増加によってサイトの表示サイズが固定されなくなったことが挙げられます。また、高解像度のディスプレイが主流となってきたため、特にRetinaディスプレイ※1の需要増加が大きいです。

レスポンシブサイトの増加

高解像度のディスプレイに対応しては、画素数を増やして画像ファイルを保存するのが一般的ですが、専用の画像を用意する必要がある他、画素数を増やせば増やすほどに画像容量も大きくなってしまいます。

SVG画像は一つ作ってしまえばスマホ対応・Retina対応といったディスプレイに関わらず、キレイな画像をユーザに提供できます。この役目はこれまでアイコンフォントが担っていましたが、 不要コードを必要とすることによるアクセシビリティ問題がありました。

ユーザーの環境(ブラウザ設定など)によって表示が行えないなどデメリットも大きく、それを改善できる手段としてもSVGは最適でした。

※1:Retina ディスプレイとは

iPhone 4より採用された高画素密度のディスプレイ。端末の横幅を変えることなく、2倍の画素数を表示する。

ベクターデータであるということ

SVGの強みとして、CSSやjavaScriptとの組み合わせで「後から色やサイズを変えられる」「アニメーションや透過といった処理を追加できる」という利点があります。これまでは、画像をアニメーションさせるためには複数の画像を用意してgifアニメーションを作成するか、javaScriptで切り替える“パラパラ漫画”のような表現が用いられてきました。

SVGであれば、“線を描画する“、“形状を変える”、“組み合わせて模様を描く”など、これまで画像でできなかった表現を行えます。何より、ベクター画像の場合はピクセルの概念が無いため、どんなに拡大してもくっきりとしたきれいな線を保ちます。

これは、前述の高解像度ディスプレイの対応他、同じSVGデータを別の場所に違うサイズで利用できるなど、大きな魅力と利点になります。

【画像を同じ比率で拡大した際の見え方の違い】

見えかたの違い

対応ブラウザの増加

これまで、SVGを非対応ブラウザへ表示するためにはスクリプトの使用や、代替画像を用意する必要がありました。いくら便利であっても、シェアの多いブラウザであるIEへの対応が遅れていたため、SVGはWeb制作においては「使いにくい」ファイル形式と思われてきました。

ですが、HTML5の普及とIEの標準対応が行われたことで、ぐっとSVGが扱いやすくなりました。現在では最新のブラウザであれば、多少の表示差異はありますがWeb制作に利用するにおいて問題なくSVGを扱えるようになっています。

対応ブラウザが増えるということは、サイト構築のツール選択において大きなプラスとなりました。


まとめ:SVGはフロントエンドエンジニアの悩みを解決してくれるとても便利なフォーマット

SVGはデザインの形状を保ち、高解像度のブラウザにも対応できます。また、ファイル内にパスのデータを持っているため、アニメーションの作成も画像データを元にするより簡単に行うことができます。

上記から、SVGはこれまで主流となっていた画像やアイコンフォントのデメリットを無くして、サイトにきれいな画像を表示することができる素晴らしいフォーマット形式といえます。

ただし、複雑なオブジェクトを扱うには、SVGはまだ完璧ではありません。

ですが、「CSS上でサイズや色を変更できる」「アニメーションや透過も行える」ことができるので、一つファイルを作ってしまえばその後の編集の自由度は大変高いためロゴやアイコンといった、シンプルでかつ美しく見せたい箇所にSVGは最適なファイル形式といえます。

「こちらのディスプレイで表示がきれいに出ているのに、あちらのディスプレイでアイコンがボヤボヤしてる…」といった、表示の差異とその対応には頭を悩ませていました。そんな悩みを解消できるSVGは、PLAN-Bでもどんどんと取り入れていっています。

まだ制作にSVGを使っていない人は、SVGを使ってどんな環境でもきれいな画像を表示してみましょう。