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