先回まで数回に分けてホームページに動画や画像を読み込む方法について取り上げてきました。 今回は、特にアイコンなどに用いることのできるSVGフォーマットについて解説してみたいと思います。 SVGフォーマットの画像を使用することにはいくつもの利点がありますので、ぜひ活用してみてください。
SVGファイルとは？
SVGとは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、画像を表示するためのフォーマットの一つです。 拡張子と呼ばれるファイル名の後につく名前は「.svg」になります。
画像を表示するという点では、一般的によく見かける JPEG や PNG などの形式の一つなのですが、JPEG や PNG が「ラスタ形式」（またはビットマップ画像）であるのに対して、SVG は「ベクタ形式」と呼ばれる方法で画像を表示します。
SVGファイルを使用することのメリット
１．どんなサイズでも綺麗に表示できる
ラスタ形式の画像では、1ピクセルごとに色を指定して画像としているため、当然縦横のピクセル数が少なくなると、画像の角の部分がギザギザになります。
一方で、ベクタ形式の画像ファイルは、計算式としてデーターが保存されており、その画像が表示される度に計算を行ない画像を描くことになります。そのため、どんな大きさで画像を表示させても角が「ぎざぎざ」にならずに綺麗に表示されます。
２．ファイルサイズを小さくできる
ラスタ形式の画像では、綺麗に画像を表示させようとすると、どうしてもある程度のピクセル数が必要になり、その分ファイル容量が大きくなってしまいます。 結果的にそれはホームページの表示速度を低下させる要因の一つにもなります。
一方で、ベクタ形式の画像ファイルは、計算式でデータを保存しており、どんな大きさで表示する場合でも同じファイルを使用できるため、相対的にファイルサイズを小さくすることができます。
例えば以下の画像の場合、PNGの画像ファイルをSVGに変換することにより、より綺麗に、かつファイルサイズは約半分になります。
SVGフォーマットの苦手とする画像
以上のようにSVGフォーマットは非常に便利な画像フォーマットなのですが、苦手な分野もあります。
それは、画像ファイルのデータ量が多い場合、つまり「写真」の表示です。 上に挙げたようにSVGフォーマットの画像は、計算式として保存されているため、表示するたびに計算が行われることになります。 その際、写真のようにいろいろな色が使われていたり複雑な形状をしている場合、計算式が非常に複雑になることによりデータ量が増え、さらにそれを表示するためにも計算に時間がかかってしまいます。それで、多くの場合綺麗に表示されないのです。
画像をSVGで表示すると以下のようになってしまいます。
しかも肝心なファイルサイズは、以下の画像の場合、PNG 画像に比べ７倍くらいになってしまうのです。
「写真」にはJPEG か PNG、「アイコン」の場合には SVG がベスト
このように、「写真」を表示する場合には、PNG や JPEG フォーマットがより使い勝手がよく綺麗に表示されます。
一方で形状がシンプルで、使用されている色が少ない「アイコン」などの図形の場合にはSVGフォーマットのほうがより勝っていると言えるでしょう。
ホームページの中でこの二つの画像形式を上手に使い分けることが重要と言えそうです。
実際にホームページにSVG画像を表示させる方法
１．既存のPNG ファイルや JPEG ファイルを、SVG ファイルに変換して保存
Adobe Illustratorなどの有料のソフトでは、ファイル形式を変更して保存することができます。
または、フリーのオンライン変換ツールを使用することもできます。例えば以下のサイトがあります。この他にも検索してみると、いくつもの無料の変換ツールがありますので、活用してみてください。そうすると、ファイル名以降の拡張子が「.svg」に変わっていると思います。
※ なおこのサイトは一定時間内で変換できるファイル数が制限されているようですので、試しに数枚変換してみたいという時に活用してみてください。
さらに、別の方法として、フリーのアイコンをダウンロードする際に、最初からSVGフォーマットのアイコンを選択できる場合もあります。以下のサイトはその一例です。
２．SVG ファイルを表示してみる
これは上記の補足になりますが、SVG ファイルを表示して確認するためには、Adobe Illustratorなどの有料のソフトを使用しなくても、通常のインターネット・ブラウザで表示を確認できます。
例えば、ダウンロードしたSVGファイルを Internet Explorer や Google Chome などで表示できます。
３．HTML、およびCSSでスタイリングを行なう
これは、JPEG ファイルや PNG ファイルの場合と同様です。 手順１で変換したファイルがSVGに変換されていると思いますので、HTML上の「.png」や「.jpg」の拡張子の記述を「.svg」に変更するだけです。
例えば、以下のようにHTMLで記述していた場合・・・
<img src="logo2.jpg" alt="会社のロゴマーク">それを以下のように変更するだけです。
<img src="logo2.svg" alt="会社のロゴマーク">これで表示されるようになっていると思います。
４．ブラウザーで表示確認
アイコンを配置したものを表示してみましょう。アイコンの角がギザギザになりがちだった画像が、綺麗に表示されるようになっていると思います。
５．補足（サンプルコード）
以下のようにHTMLとCSSに記入することにより表示できます。参考になさってください。（なお、PNGファイルとSVGファイルはご自分で準備し「img」フォルダ内に保存してください。）
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>はじめてのホームページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="logo-container">
<img src="img/logo2.svg" alt="">
<!-- ↑ この部分を変更 -->
</div>
</div>
</div>
<div class="main">
<div class="main-contents">
メインコンテンツ
</div>
<div class="right-navi">
右側のカラム
</div>
</div>
<div class="left-navi">
左側のカラム
</div>
<div class="footer">
ここにはフッターメニューが入ります
</div>
</body>
</html>
CSS
body{
background-color: lightyellow;
}
.header {
height: 300px;
}
.logo-container{
width: 300px;
height: 300px;
margin-top: 10px;
margin-left: 10px;
}
.logo-container img{
height: 100%;
width: 100%;
}
.footer{
height: 200px;
background: black;
color: #fff;
clear: both;
}
.main-contents, .left-navi, .right-navi {
height: 400px;
}
.main-contents {
background-color: red;
color: #fff;
float: left;
width: 80%;
}
.left-navi {
background-color: blue;
color: #fff;
width: 20%;
float: right;
}
.right-navi {
background-color: green;
color: #fff;
float: right;
width: 20%;
}
.main{
width: 80%;
float: right;
}
@media screen and (max-width: 600px){
.main, .left-navi,.main-contents, .right-navi{
width: 100%;
}
}
まとめ
「写真」には、JPEG か PNG、「アイコン」の場合には SVG がベストです。
ホームページの中で、それぞれの長所短所を理解し、上手に使い分けましょう。
参考になれば幸いです。