福岡・筑紫野市のホームページ制作会社「WEBプラネット」。
WordPress(CMS)×スマホ対応(レスポンシブWebデザイン)の
ホームページを福岡を中心に全国対応で制作!

Web制作で使用する画像はSVGへ

ホーム » ブログ » ホームページ・サイト制作 » Web制作で使用する画像はSVGへ
2022-03-22
Web制作で使用する画像はSVGへ

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

ホームページ上に画像を表示するためのフォーマットとして、これまでJPEG、GIF、PNGが多く用いられて来ましたが、ここ数年は、Web制作で使用する画像は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の普及とともに多くのブラウザでサポートされるようになりました。ベクター画像を表示する技術であり、拡大縮小を行っても画質が劣化しない特徴があります。

【メリット】

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

デメリット】

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

現在の主流はSVG

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

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

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

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

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

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

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

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

対応ブラウザの増加

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

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

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