SVGファイルとは？有効な使い方とPNG、JPEGからの簡単な変換方法

こんにちは。mito（@mito_works）です。

今回はSVGファイルについての話題です。

mito

最近コーディングをしていてアイコンやロゴデータがSVG形式ということがよくあります。

SVGデータの特徴と、どういうときに使うのが良いのかをまとめました。

momo

それじゃあ、いってみよう〜！

SVGとは

SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。

momo

ベクターデータは「画像を、点の座標とそれを結ぶ線（ベクター、ベクトル）などの数値データをもとに、演算によって再現する方式」だよ！

SVGの良いところ

「拡大・縮小しても画質が損なわれない」

SVGはベクトル形式の画像であり、拡大縮小に強く画質が劣化しません。
そのため、どのような画面上であっても鮮明かつ明瞭な画像を表示できます。

momo

スマホやタブレットや高解像度ＰＣでもキレイな画質で表示できるよ！

mito

スマホでは綺麗に表示されているのに、PCでは画像が荒い。。なんてことは起きないんですね。

momo

ちなみに、EPSなどのフォーマットもSVGファイルと同じベクトル形式だよ！

逆にGIF、JPEG、PNGなどの「ラスタ形式」の画像は、ピクセルを縦横に並べる方法で画像を描画します。

ラスタ形式の画像は拡大縮小してしまうと画質が劣化してしまったり、画像がギザギザになります。加えて、ファイルサイズが大きくなってしまい負担になるというデメリットがあります。

動きやぼかしなどのエフェクトを加える事も可能

「数値データをもとにして演算された画像」なのでCSSやJavaScriptのアニメーションととても相性が良いです。
動きやぼかしなどのエフェクトを加える事も可能です。

テキストエディタで開きファイルを編集することが可能

画像として編集することも、コードを編集することもどちらも可能です。

momo

テキストエディタで開き、簡単な変更やクラス名をSVGデータ自体にもたせたりすることもできるのが便利だよ！

SVGのデメリット

ベクトル画像は複雑な計算式で画像を描画しているため、写真のように複雑で繊細な配色や輪郭の画像描画には適していません。

momo

ロゴ、タイトル、アイコンなど単純なものはSVGファイル、写真はjpegもしくはpngと使い分けると良いね！

SVGデータの作り方

mito

illustratorを使ってSVGデータとして書き出す方法で作りました。

イラストレーターでパスデータ作成

文字データはアウトライン化します。

SVG形式でファイルを保存

ファイル保存時に拡張子svgを選択します。

mito

簡単に作れますね！

JPEG・PNGからSVGへ変換する方法

pngデータしかないけれど、SVGとして使いたい！という時などに有効です。

mito

今回は簡単にsvgへ変換できるオンラインサービス(Online Image Vectorizer)を使ってみました。

momo

ワンクリックで簡単にsvgデータへ変換できるよ！

今回変換した画像はこちらです。

まとめ

ABOUT ME

mito

こんにちは！mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。