当サイトの環境は ワードプレス ですが、たまに SVG 画像を利用しています。
ワードプレスの標準状態では SVGファイル を扱うことができませんが、プラグインを導入することで利用が可能。プラグインはテーマとの相性もあるので導入は自己責任でお願いします。ちなみに当サイトのテーマは THE THOR でこの記事のプラグインでは特に問題は出ておりません。
テーマについてTHE THORレビュー
ワードプレス で SVG 画像を利用する plugin「SVG Support」
以前は、プラグインを使わずにfunction.phpと.htaccessにコードを追加していましたが、現在は手軽なプラグインを利用しています。
SVG Supportはワードプレス公式プラグインなのでワードプレスメニューより追加可能
設定項目が2つあります。が、特に設定の必要はありません。
以上です。
これでjpg画像と同じようにメディアに画像がアップ出来ます。メディアでプレビューも表示されますし、記事に挿入もできます。
画像の比較（SVG vs jpg）
容量のほとんど同じファイルで比較してみましょう。
原寸比較
jpgは最高画質で書き出しをしています。
ワードプレスで圧縮が掛かるのでしょうか？ブラウザ表示は元ファイルよりかなり汚いです。
縮小比較
こちらもjpgがかなり汚いです。
拡大比較
拡大するとjpgは汚なくて文字が頭にぱっと入ってきません。SVGはクッキリ綺麗で、なんか公式っぽい感じ。
残念なことに比較はスマホ表示だと確認できないかも・・・結論としては、圧倒的に綺麗な上、拡大縮小も自由自在なSVGの勝利といったところ。
※jpgは写真が得意
※SVGは劣化しないから当然の結果
ワードプレスで使うSVG画像のメリット
SVGは容量が軽く、画質がシャープでベタが綺麗
jpgのように圧縮によるモアレが出ないので画像がシャープです。
容量が軽く、拡大縮小しても画像が劣化しません。PC表示を踏まえて画像を作成すると画像サイズが大きくなり容量も大きくなります。SVGは大きさを気にすることなく作ることができます。
修正が容易です
jpgなどのビットマップ画像に比べると修正が簡単です。アプリ自体の動作も軽くて快適です。
ワードプレスで使うSVG画像のデメリット
SVGファイルはプログラムです。そのため内部に不正なプログラムを仕込まれる可能制は否定できません。自作している場合は問題なし。
上記の問題が関係していると思われますが、facebookやtwitterなどにシェアされたとき、アイキャッチ画像がSVGだと表示されません。
複雑なものはjpgより容量が大きくなる場合があります。適材適所で使いましょう。
SVG画像を作るアプリ
僕は、Adobe illustrator を使用しています。
最新のイラレはとても優秀なアプリですが月額制で値段が高くコストパフォーマンスが悪いです。
メルカリなどでバージョンの古いパッケージ版を探すのも手。※対応機種に注意
参考サイト対応表はコチラ
フリーソフトもあります。「Inkscape（インクスケープ）」というソフトです。win & mac に対応。
格安でイラストレーター並の機能を持ったアプリもあります。現在はこちらをメインに使用しています。
関連記事Affinity designerイラレ代替え最良の選択肢
あとがき
SVGは色々な場面で使われるロゴなどの画像に使うのが一般的なようです。
製作が快適なので、僕はアイキャッチ画像に使用。SVGを使用するようになってからキャッチ画像の製作時間は大幅に短縮されました。
