SVGとは？PNG・JPEG画像形式との違いは？SVGファイルの変換と作り方を解説！
目次[閉じる]
「SVGファイルってなに？」
「SVGファイルの作成方法や変更方法を知りたい！」
という方も多いのはないでしょうか。
SVGファイルとは、色や曲線を数式によって表現するベクタ形式の画像フォーマットのことです。画像を拡大させてもぼやけることがなく、綺麗な状態を保てるという特徴があります。
この記事ではそんなSVGファイルについてより詳しく、またSVGファイルの作成方法や変換方法についても解説していきます。
誰でも5分で理解および実行できるやさしい解説となっているためぜひ見ていってください。
SVGファイルとは？
SVGファイルとは、Scalable Vector Graphicsの略称でベクタ形式の画像フォーマットのことです。
先ほども述べたように色や曲線を数式によって表現するため、画像を拡大させても綺麗な状態を保てるという特徴があります。2001年に開発された当時は対応するブラウザが少なかったことからJPEGやPNGなどの画像フォーマットが使用されていました。
しかし、SafariやGoogle Chromeなど主要なブラウザが対応するようになった現在では、SVGファイルも選択肢の一つとして選ばれるようになっています。
他の画像形式(JPEG、PNG)との違い
JPEGおよびPNGとSVGファイルの違いは表示形式にあります。
JPEGおよびPNGは点の集合体によって画像を表現するラスタ形式で、SVGは色や曲線を数式によって画像を表現するベクタ形式です。
ラスタ形式は拡大するとドットが明確に見えるようになってしまい、画像がぼやけて見えます。
この現象を防ぐためには点の数を増やす=解像度を上げなければなりませんが、その分データ容量も大きくなるというデメリットも。ベクタ形式ならブラウザが自動でサイズを変更してくれるため、綺麗な状態を保つことが可能です。
SVGファイルのメリット
SVGファイルを使用するメリットは主に2つあります。
・色やサイズの変更がカンタン
・アニメーションを付けられる
色やサイズの変更がカンタン
写真出典：https://hyper-text.org/archives/2014/02/svg_flexible_icon_button.shtml
SVGファイルは先ほども述べたように色や曲線を数式によって表現するため、色およびサイズの変更がカンタンに行えます。
JPEGやPNGなどのラスタ形式であればユーザーが利用する端末に合わせて複数の画像サイズを用意する必要がありますが、ベクタ形式のSVGファイルであれば1つの画像で対応可能です。
この特徴を利用して近年のWebサイトで主流となっているレスポンシブデザインで使用されるケースが多くなっています。
アニメーションを付けられる
写真出典：https://www.nxworld.net/15-css-unique-loading-animations.html
SVGファイルはCSSやJavaScriptを使用してアニメーションを付けられます。同じようなアニメーションを付けられる画像フォーマットとしてGIFが挙げられますが、SVGファイルはGIFよりもデータ容量が小さく、画像を拡大しても綺麗な状態のまま表示されるというメリットがあります。
SVGファイルのデメリット
先ほどはSVGファイルのメリットについて解説してきましたが、一方でデメリットにはどのような点があるのでしょうか。
SVGファイルのデメリットは主に2つあります。
・写真には向かない
・対応していないブラウザもある
写真には向かない
SVGファイルは写真のように莫大な画素数を誇るデータには向きません。
先ほどから述べている通りSVGファイルは色や曲線を数式によって画像を表現するため、莫大な画素数を誇る写真を数式にしようとする際に同じような莫大な計算が必要になるからです。
写真を使う場合にはJPGやPNGといった画像フォーマットをおすすめします。
対応していないブラウザもある
現在ではほぼ全てのブラウザで対応が進んでいますが、バージョンが低いブラウザを使用している場合には対応していない可能性があります。例えばIEのバージョン8以下や、Safari 4.1以下ではSVGファイルを正常に読み込めません。
もし、自身が利用しているブラウザでSVGファイルを読み取れない場合にはブラウザのバージョンをアップデートするか、JavaScriptライブラリ「modernizr.js (https://modernizr.com/) 」を利用することで読み取りが可能になります。
SVGファイルの作成方法
SVGファイルを作成するにはAdobe IllustratorやAdobe Photoshopなどの画像編集ソフトの使用が一般的です。
しかし、これらは月額料金を支払わなければ使用できないため、中には無料のオンラインエディタを使用される方もいます。
無料のオンラインエディタではVectrやVecteezy Editorが有名です。
ここではAdobe Illustratorと無料オンラインエディタVectrを使用したSVGファイルの作成方法について解説していきます。
Adobe Illustratorを使用する
Adobe Illustratorを使用してSVGファイルを作成するには以下の1~6の手順が必要です。
1. Adobe Illustratorを起動する
2. SVGファイルとして保存したい画像を開く、または作成する
3. 「ファイル→別名で保存」をクリックする
4. フォーマットを「SVG」に変更して「保存」をクリックする
5. SVGオプションが表示されるため「OK」をクリックする
6. SVGファイルとして保存される
無料オンラインエディタVectrを使用する
無料オンラインエディタVectrを使用してSVGファイルを作成するには以下の1~7の手順が必要です。
1. ブラウザからVectrにアクセスする
2. トップ画面に表示されている「Use Online」をクリックする
3. チュートリアルの案内画面が表示されますが、ここでは「SKIP」をクリックする
4. SVGファイルとして保存したい画像を開く、または作成する
5. 画面右上の「Export」アイコンをクリックする
6. 画像のサイズを変更して「SVG」形式を選択する
7. 画像を右クリックもしくはドロップ&ドロップで保存する
SVGファイルの変換方法
PNGおよびJPEGの画像はブラウザ上のツールを使用してSVGファイルに変換可能です。ここではPNGおよびJPEGの画像からSVGファイルに変換する方法と、その逆でSVGファイルからPNGおよびJPEGに変換する方法を紹介していきます。
PNG・JPEGからSVGファイルへ変換する方法
PNGおよびJPEGからSVGファイルへ変換する際には「Online Image Vectorizer」というツールがおすすめです。
変換したいPNGおよびJPEGの画像をドラッグ&ドロップするだけでSVGファイルへ変換できます。
1. ブラウザからOnline Image Vectorizerにアクセスする
2. 変換したい画像をドラッグ&ドロップする
3. 画面右下の「Download」をクリックする
4. PNGおよびJPEGかSVGファイルへの変換が完了する
SVGファイルからPNGへ変換する方法
SVGファイルからPNGへ変換する際には「SVG to PNG」というツールがおすすめです。こちらも変換したいSVGファイルをドラッグ&ドロップするだけでPNGに変換できます。
最大20個までのSVGファイルを一括で変換できるため、変換したいファイルが多い場合でも素早く変換可能です。
1. ブラウザから「SVG to PNG」にアクセスする
2. 変換したいSVGファイルをドラッグ&ドロップする
3. 「全てダウンロード」をクリックする
4. SVGファイルからPNGへの変換が完了する
SVGファイルからJPEGへ変換する方法
SVGファイルからJPEGへ変換する際には「iLovelMG」というツールがおすすめです。
ドラッグ&ドロップには対応していませんが、変換したい画像を選択するだけと操作はカンタンです。
こちらも複数のSVGファイルを一括でJPEGに変換できます。
1. ブラウザからLovelMGにアクセスする
2. 「画像を選択」をクリックして変換したい画像を選択する
3. 画面右下の「JPEGに変換」をクリックする
4. 「変換後の画像をダウンロードする」をクリックする
5. JPEGへの変換が完了する
まとめ
この記事ではSVGファイルとは何か、またSVGファイルの作成方法や変換方法について解説してきました。SVGファイルとは色や曲線を数式によって表現するベクタ形式の画像フォーマットのことです。色やサイズの変更がカンタンだったりアニメーションをつけられたりといったメリットがありますが、その一方で写真には向かなかったり対応していないブラウザがあったりといったデメリットもあります。これらを把握した上でSVGファイルを活用できれば最大限の効果を発揮するでしょう。
