Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21
Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
![](https://for-men.jp/wp-content/uploads/2018/08/huki-haa.png)
ブログに挿入したイラストがさ、シャキッとしてないんだよね
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kuma1.png)
シャキッと?画質が荒いってこと?
![](https://for-men.jp/wp-content/uploads/2018/08/huki-u-n.png)
そうそう、どうしても拡大したりするとシャキッとしないんだよね
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kuma1.png)
そういうときは、SVG画像を使うのがおすすめだよ
この記事では
イラストをきれいに表示するSVG画像について説明。
シャキッとします!
PNG
![](https://for-men.jp/wp-content/uploads/2018/10/PNGくま.png)
SVG
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kuma3.png)
PNGのボケぐあいは悪意を感じるな
SVG画像とは
ブログに挿入する画像はJPEGやPNGと言った形式が多いですよね。 SVGも画像の形式の1つです。![画像の種類](https://for-men.jp/wp-content/uploads/2018/10/画像の種類.png)
画像には様々な種類(形式:フォーマット)があります。それぞれにメリット・デメリットがあります。
![](https://for-men.jp/wp-content/uploads/2018/08/huki-talk.png)
JPEGやPNGを知らなくても、実生活の中で色々と使われています
JPEG
主に写真の画像形式です。![ネコ画像](https://for-men.jp/wp-content/uploads/2018/10/ネコ画像.jpg)
スマホで撮影した写真は、ほぼJEPGで保存されています。写真を取り扱うのに適した画像形式です。
PNG
イラストでよく使う画像形式です。![猫画像](https://for-men.jp/wp-content/uploads/2018/10/猫画像.png)
スマホアプリのお絵かきソフトなんかでイラストを作成した際はPNGで保存されます。イラストに適した画像形式です。
表示サイズよりも画像のサイズが大きい
![表示サイズ](https://for-men.jp/wp-content/uploads/2018/10/表示サイズ.png)
画像が荒くなってしまう場面
![一部を切り取り拡大](https://for-men.jp/wp-content/uploads/2018/10/一部を切り取り拡大.png)
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kuma1.png)
PNGはサイズを調整しないと画像が荒くなってしまいます
SVG
拡大してもキレイな画像で表示されるのがSVGです。
SVG画像
PNG画像
![猫画像](https://for-men.jp/wp-content/uploads/2018/10/猫画像.png)
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kirakira.png)
SVGめっちゃキレイ!
SVGを使う方法
![イラレとフォトショ](https://for-men.jp/wp-content/uploads/2018/10/イラレとフォトショ.png)
イラストレーターやフォトショップ(CC以降)で作成することが可能です。
![](https://for-men.jp/wp-content/uploads/2018/08/huki-talk.png)
イラストレーターは慣れれば数分でアイキャッチやイラストを作成できちゃうよ
for menで使っているSVG画像
基本的には簡単なイラストやアイコンに使用しています。記事下の関連記事部分
ポイントで使うキャラクターもSVGにすることでどんなサイズでもキレイに表示されます。
固定ページのヘッダー画像
固定ページのように大きいヘッダー画像は、スマホではかなり縮小されて見づらいので、SVG画像にしています。
バナー
バナーでも使っています。
![](https://for-men.jp/wp-content/uploads/2018/08/huki-wa-i.png)
やっぱりシャキッとした画像のほうがいいよね
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kuma1.png)
SVG使ってみたくなったでしょ!