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
ブログに挿入したイラストがさ、シャキッとしてないんだよね
シャキッと？画質が荒いってこと？
そうそう、どうしても拡大したりするとシャキッとしないんだよね
そういうときは、SVG画像を使うのがおすすめだよ
この記事では
イラストをきれいに表示するSVG画像について説明。
シャキッとします！
PNG
SVG
PNGのボケぐあいは悪意を感じるな
SVG画像とは
ブログに挿入する画像はJPEGやPNGと言った形式が多いですよね。 SVGも画像の形式の1つです。
画像には様々な種類（形式：フォーマット）があります。それぞれにメリット・デメリットがあります。
JPEGやPNGを知らなくても、実生活の中で色々と使われています
JPEG
主に写真の画像形式です。
スマホで撮影した写真は、ほぼJEPGで保存されています。写真を取り扱うのに適した画像形式です。
PNG
イラストでよく使う画像形式です。
スマホアプリのお絵かきソフトなんかでイラストを作成した際はPNGで保存されます。イラストに適した画像形式です。
表示サイズよりも画像のサイズが大きい
この様に表示サイズに比べて画像サイズがピッタリのときや大きい時は、キレイに表示されます。
ただし、表示サイズよりも画像サイズが小さいときに画像が荒くなってしまいます。
画像が荒くなってしまう場面
拡大すると画像がボケっとしてしまいます。
PNGはサイズを調整しないと画像が荒くなってしまいます
SVG
拡大してもキレイな画像で表示されるのがSVGです。
SVG画像
PNG画像
SVGめっちゃキレイ！
SVGを使う方法
イラストレーターやフォトショップ（CC以降）で作成することが可能です。
イラストレーターは慣れれば数分でアイキャッチやイラストを作成できちゃうよ
for menで使っているSVG画像
基本的には簡単なイラストやアイコンに使用しています。記事下の関連記事部分
ポイントで使うキャラクターもSVGにすることでどんなサイズでもキレイに表示されます。
固定ページのヘッダー画像
固定ページのように大きいヘッダー画像は、スマホではかなり縮小されて見づらいので、SVG画像にしています。
バナー
バナーでも使っています。
やっぱりシャキッとした画像のほうがいいよね
SVG使ってみたくなったでしょ！
