BLOG

前回ベクタ形式のFont Awesomeに関する記事を書きましたが、そもそもラスタ形式とベクタ形式の画像についてよく解説していなかったので今回はその違いと利点を説明していきます。
 

 

ラスタ形式の画像とは?

ラスタ形式の画像(よくビットマップ画像とも呼ばれます)は小さくて正方形の色の点(ドット)、専門的にいうとピクセルという画素が集まって構成されています。

ですからラスタ形式の例えば透過原稿のpngの★の画像を拡大するとギザギザが目立ち使い物になりません。

しかしラスタ形式の画像はピクセル画素の色の濃淡にバリエーションが数多くあるのでグラデーションなどが綺麗に表現できる利点があります。特にラスタ形式のjpg画像やpng画像は写真や多彩な色のイラストに向いているわけです。
 

 

ベクタ形式の画像とは?

一方こちらはadobe Illustratorというドローイングソフトで描いた図形です。

ベジュ曲線というもので描いています。

線で囲んだ所を塗り図形ができます

下のようにIllustratorで描いた図形は600%拡大してもギザギザはでません。

実はIllustratorで描いた図形はベクタ形式ですのでEPS,PDFそしてSVGのフォーマットに代えることができるのです。

ベクタ形式の画像は別名ベクトル画像とも呼ばれ、「アンカー」と呼ばれる座標の点を複数作り、そのアンカー同士を線で繋いだり、線で囲まれた部分を塗りつぶしたりして表示しています。
 

 

ベクタ形式のSVG画像はタグで表示可能

座標を利用して図形を表現できるのでベクタ形式のSVGは実はHTML5に対応しておりSVGタグで表示することができるのです。

こちらが円のSVGタグです。

<svg width=”600″ height=”100″ viewBox=”0 0 600 100″> <circle cx=”100″ cy=”50″ r=”50″ fill=”red”></circle></svg>

fill=”red”とは色の指定でここをblueにすると円の図形が赤から青に変わります。

▼SVGタグで図形を描いてみました

ベクタ画像は拡大しても輪郭はとても綺麗に表示されます。直線や曲線などで構成される図形に向いているので企業のロゴマークなどには非常に向いております。またベクタ画像はアンカー座標の数値しか記録していないのでファイルサイズが小さくなりやすいという利点もあります。
 

 

ラスタ形式とベクタ形式のまとめ

ラスタ形式の画像ファイルにはjpg,png,gif,bmpなどがあり、写真や多彩なイラスト画像に向いています。そして色の点がひとつひとつ全て記録されているので色数が多ければ多いほどファイルの容量は重くなります。

ベクタ形式の画像ファイルにはsvg,eps,pdfなどがあり、輪郭が曲線・直線で構成されている図形に向いています。そしてSVGはアンカー位置などの情報だけを記録し、その情報をもとに図形を描画しているのでファイルの容量は非常に軽くなります。

またベクタ形式の画像をラスタ形式の画像に作り変えることはできますが、逆にラスタをベクタに作り変えることはできません。
 

 

lightning

無料テーマのlightning

次回予告
次回は無料テーマのlightningです。5日間いじりまわして、解析してみました。乞うご期待!

 

 

 

 


WordPressランキング