サイトのロゴを綺麗に表示
サイトのトップページに表示するブランドの顔となるロゴマーク、綺麗に表示させるには保存形式（拡張子）は何がいいのか6つを比べました。
目次
保存形式はsvgが綺麗
昔はgifやpng(png24)でロゴを保存していましたがサイトにアップすると少しぼやけてしまうのが気になっていました。ある時svgで保存すれば良いのだと分かりました。
このサイトのロゴ（「手縫い革鞄ENBARQMENT」もsvgです）
有名サイトの保存形式を調べてみました
サイト9つのヘッダーロゴを調べました。
世界的に有名なバッグブランド、ハウスメーカー、花屋さん、雑誌、ガス会社、ホテルなど。赤丸がsvgで、他のjpg、png、gifに比べてサイト上で見るとやっぱり綺麗なのです。パキッとクリアに見えます。
6つの保存形式を比べました
Inkscapeのsvg、Inkscapeのpng、Illustratorのpng(8)、Illustratorのpng(24)、Illustratorのgif、Photoshopのjpg、計6つの保存形式を実際のサイトにアップして比べました。ロゴは同じ物を使っています。
【Inkscape 保存形式 svg】一番綺麗です。
【Inkscape 保存形式 png】少しぼやけています。
【Illustrator 保存形式 png(8)】Inkscapeのpngとイラストレーターのpngを比べてみたく。 イラレのpng(8)はInkscapeのpngよりももたっとして見えます。鹿の背中の白がより潰れました。
【Illustrator 保存形式 png(24)】 png(8)と(24)の違いはここでは無いように見えます。
じゃあ何で？
後で背景に色を付けて比較します、その時に違いが分かります◎
【Illustrator 保存形式 gif】これもぼやけています。
【Photoshop 保存形式 jpg】通常、ロゴは写真のように色数が多く無いのでjpgで保存する事はあまり無いですが比較のため◎ これもぼやけています。
直接このページに配置して比較します
このページを拡大も縮小もせず100%の大きさで見ると6つともほぼ違いは無いように見えます。
【Inkscape 保存形式 svg】
【Inkscape 保存形式 png】
【Illustrator 保存形式 png(8)】
【Illustrator 保存形式 png(24)】
【Illustrator 保存形式 gif】
【Photoshop 保存形式 jpg】
しかしメニューから表示＞拡大、縮小（macの場合）すると、
svg以外はぼやけているのが分かります。
それから背景に色を付けるとIllustratorのpng(8)は背景が白い時は気付かなかった白いふちどりが見えます。
Illustratorのgifにも確認出来、Photoshopのjpgは背景が完全に白です。
本当だ
イラレのpng(8)やgifで保存する時にロゴの周りに出てしまう（デフォルトが白）白を赤にして背景と同じ色にして目立たないようにする設定方法もありますが、背景色が変わる度に色を調整して保存し直すのは大変です。背景が何色でも関係無い、拡大縮小しても綺麗なのがsvgなのです◎
Inkscapeでブランドロゴを作ってsvgで保存します
ここからは、Inkscapeを開いてロゴを作り終わった所から実際の保存の解説をします。（もちろんIllustratorでも作れます。そしてスクラッチで描いた物もsvgファイルになります。）
ファイルのサイズはデフォルトでA4ですがそれでは大き過ぎます。ではどれ位のサイズにすればいいのか、、
このサイトはWordPress（ワードプレス）で作っているので管理画面で見てみると「ヘッダーロゴ画像」サイズ280×60pxと指定しています。そのサイズにしようと思います。
ファイルサイズの変更
ファイル＞ドキュメントのプロパティー
カスタムサイズの所にサイズを記入します。
小さい枠が出来ました。その中が表示範囲なのでロゴを移動します。
サイズ一杯まで大きくして完了。
svgで保存します
ファイル＞名前を付けて保存
「ファイル保存先の選択」窓が出るので保存形式：Inkscape SVG(*.svg)を選び、任意の保存先も選択します。（ここではデスクトップ）
こんな形のファイルが出来ました。
ついでに練習でpng画像も作ってみます。
ファイル＞PNG画像にエクスポート
ちょっと不思議な事に窓は出て来ないで画面の右側にこんな表示が出ます。でもファイル名はちゃんと〇〇.pngとなっています。エクスポートを押します。
svgファイルロゴをWordPressにアップします
管理画面へ行き、外観＞カスタマイズ
ここから先はお使いのテーマ、プラグインによって違うので参考までに。私の場合はテーマにLightningを使っているのでロゴの位置にある青い鉛筆マークをクリックすると「ヘッダーロゴ画像」の設定が出ます。
画像を選択
「メディア」に先ほど作ったsvgファイルをアップロードしてそれを選択して「公開」（保存）すれば完了です。
WordPressでsvgファイルがアップ出来ない時
svgファイルがアップ出来ない時があります。
私もこのサイトでは大丈夫ですがテスト用のサイトではこの表示が出てしまいます。調べてみるとsvgファイルが扱えるようになるプラグインがあるようですよ◎
ロゴだけに限りませんが見ている方の環境は様々なのでなるべく綺麗に表示したいイラストちっくな物はsvgがおすすめです。
ファイルのサイズ比較
最後に今回作った6つのファイルのサイズの比較です。（これはおすすめのsvg）
- Inkscapeのsvg（◎）：28KB
- Inkscapeのpng（○）：11KB
- Illustratorのpng(8)（×）：3KB
- Illustratorのpng(24)（○）：5KB
- Illustratorのgif（×）：3KB
- Photoshopのjpg（△）：7KB
１のsvgファイルは随分重いんだね
他に比べるとそう見えるけど、一つ上の画像は46KBだから普段からそれ以上の画像をアップしているのよ
追記：ここで使っている鹿やすぐ上のBoy、Girl（webアイコンフォント）もsvgです。作り方、設置の仕方を解説しています◎
