SVG画像を使って美しいイラストを挿入しよう

MENくん
ブログに挿入したイラストがさ、シャキッとしてないんだよね
くま1号
シャキッと?画質が荒いってこと?
MENくん
そうそう、どうしても拡大したりするとシャキッとしないんだよね
くま1号
そういうときは、SVG画像を使うのがおすすめだよ

この記事では イラストをきれいに表示するSVG画像について説明。

シャキッとします!

PNG
SVG
くま3号
PNGのボケぐあいは悪意を感じるな

SVG画像とは

ブログに挿入する画像はJPEGやPNGと言った形式が多いですよね。 SVGも画像の形式の1つです。
画像の種類
画像には様々な種類(形式:フォーマット)があります。それぞれにメリット・デメリットがあります。
MENくん
JPEGやPNGを知らなくても、実生活の中で色々と使われています

JPEG

主に写真の画像形式です。
ネコ画像
スマホで撮影した写真は、ほぼJEPGで保存されています。写真を取り扱うのに適した画像形式です。
写真でよく使う形式なので、この記事では詳しくは説明しません。

PNG

イラストでよく使う画像形式です。
猫画像
スマホアプリのお絵かきソフトなんかでイラストを作成した際はPNGで保存されます。イラストに適した画像形式です。
このPNGが問題の画像形式です。 上のイラストは、適切なサイズ(表示サイズ以上)で挿入されているため、ぱっとみキレイに見えます。

表示サイズよりも画像のサイズが大きい

表示サイズ この様に表示サイズに比べて画像サイズがピッタリのときや大きい時は、キレイに表示されます。 ただし、表示サイズよりも画像サイズが小さいときに画像が荒くなってしまいます。

画像が荒くなってしまう場面

一部を切り取り拡大 拡大すると画像がボケっとしてしまいます。
くま1号
PNGはサイズを調整しないと画像が荒くなってしまいます

SVG

猫画像
拡大してもキレイな画像で表示されるのがSVGです。
拡大してみるとキレイなのがわかります。
拡大1
SVG画像猫画像
PNG画像猫画像
MENくん
SVGめっちゃキレイ!

夏だし髪を斬りに行こう!

夏だしどっか行こう!

SVGを使う方法

イラレとフォトショ
イラストレーターやフォトショップ(CC以降)で作成することが可能です。
ぼくはイラストレーター派なので、フォトショップでは作成したことがありません。 イラストレーターでは「別名で保存」>保存形式を「SVG」にするだけで簡単に作成することができます。
MENくん
イラストレーターは慣れれば数分でアイキャッチやイラストを作成できちゃうよ
お得に手に入れるならここ
たのまな 1ヶ月プランがおすすめ

for menで使っているSVG画像

基本的には簡単なイラストやアイコンに使用しています。

記事下の関連記事部分

ポイントで使うキャラクターもSVGにすることでどんなサイズでもキレイに表示されます。


固定ページのヘッダー画像

固定ページのように大きいヘッダー画像は、スマホではかなり縮小されて見づらいので、SVG画像にしています。


バナー

バナーでも使っています。


MENくん
やっぱりシャキッとした画像のほうがいいよね
くま1号
SVG使ってみたくなったでしょ!

まとめ

SVGはいつでもキレイです。 そのSVGを使うにはイラストレーター(またはフォトショップ)が必要です。 PNGなどからSVGに変換するサイトやフリーソフトはあるかもしれませんが、イラストレーターで書いちゃったほうが早いです。