SVGとは?
簡単にまとめると下記の通りです。
- SVGファイルは、JPEGやTIFF、PNGと同様に画像形式の一つ
- ベクター画像という拡大縮小をしても画像が荒くなり難い画像
- WEBサイトで使った場合はHTMLの読み込みと同時に読み込まれるためサイト表示が早い
画像データについて下記に簡単にまとめます。知っている方は読み飛ばしてください。
画像のファイル形式について
画像のファイル形式には、TIFF、GIF、PNG、JPEG、SVG、EPS、PDF、etc…様々な形式があります。どれも同様に画像ですが、画像をどういう形式で保存しているかによって、表示スピードや編集のしやすさ等の違いがあります。
ベクター画像とラスター画像
PC上で扱う画像には、ベクター画像とラスター画像の大きく2種類の画像形式があります。
ベクター画像
起終点の座標、線の曲がり方、太さ、色、等を数値で保持しており、点と点を曲線で結んで表現する画像です。
拡大縮小をしても、画像が劣化せず綺麗に表示されます。
SVG、EPS、PDFなどがベクター形式の画像です。
ラスター画像
ピクセル(画素)の集まりで表現する画像で、拡大縮小をすると画像が劣化します。
TIFF、GIF、PNG、JPEGなどがラスター形式の画像です。
SVG画像について
ここまで、画像データについて簡単な説明を書きましたが、本題のSVGについて記載します。
SVG画像は文字データのため、HTMLの読み込みと同時に読み込まれます。
そのため、サイト表示が早く人気です。WEBサイトのロゴやアイコンが、SVG画像に適してます。
ベクター画像作成ツールまとめ
高いAdobe製品を使わなくても、やりたいことを実現できる無料のベクターソフトウェアがいくつか存在します。
この記事では、もっとも一般的で効果的な無料ベクターツールをまとめてご紹介します。
無料ツール | 対応platform | 特徴 |
Inkscape | Windows macOS Linux |
オープンソースのプログラムで無料版Illustratorと言っても過言ではないほど多機能。 メリット
デメリット
|
Vectr | Windows macOS Linux Web |
基本的なベクター制作機能を全てカバー。インターフェイスもシンプルで使い易い。 メリット
デメリット
|
Gravit Designer | Windows macOS Linux Web |
Inkscape、Vectrの機能に並ぶツール。Vectrと同じく直感的に利用できる。 メリット
デメリット
|
SVG-edit | Web |
シンプル操作でファイル読み込みと書き出しも素早くできる。 メリット
デメリット
|