コーディングの勉強

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

こんにちは。mito(@mito_works)です。

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

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

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

こんな人におすすめ
  • SVGとは何か知りたい人
  • どういうときに使うべきか迷っている人
  • pngなどのデータをSVGデータに変換して使いたい人
momo
momo
それじゃあ、いってみよう〜!

SVGとは

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

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

SVGの良いところ

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

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

momo
momo
スマホやタブレットや高解像度PCでもキレイな画質で表示できるよ!
mito
mito
スマホでは綺麗に表示されているのに、PCでは画像が荒い。。なんてことは起きないんですね。
momo
momo
ちなみに、EPSなどのフォーマットもSVGファイルと同じベクトル形式だよ!

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

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

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

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

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

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

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

SVGのデメリット

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

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

SVGデータの作り方

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

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

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

SVG形式でファイルを保存

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

mito
mito
簡単に作れますね!

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

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

mito
mito
今回は簡単にsvgへ変換できるオンラインサービス(Online Image Vectorizer)を使ってみました。
momo
momo
ワンクリックで簡単にsvgデータへ変換できるよ!

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

まとめ

写真を編集するならJPEGやPNGなどのラスタ形式。

ロゴ・タイトルなどの作成にはSVGのベクトル形式。

 

 

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始めました。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。