WordPressでSVG画像を利用する方法

当サイトでは、画像にSVGファイルを多く利用しています。

ワードプレスの標準状態では、SVGファイルを扱うことができません。

WPでSVGファイルを利用する方法を紹介。

※カスタマイズは自己責任でお願いします。

プラグイン SVG Support を使う

プラグインを使用します。

以前は、プラグインを使わずにfunction.phpと.htaccessにコードを追加していましたが、現在は手軽なプラグインを利用しています。

 

SVG Supportは、ワードプレス公式プラグインなのでワードプレスメニューより追加出来ます。

ワードプレスメニュー → プラグイン → 新規追加 → SVG Supportで検索 → インストール&有効化

 

設定項目が2つあります。
が、特に設定の必要はありません。

 

以上です。

 

これでjpg画像と同じようにメディアに画像がアップ出来ます。
メディアでプレビューも表示されますし、記事に挿入もできます。

 

画像の比較(SVG vs jpg)

容量のほとんど同じファイルで比較してみましょう。
SVGファイル(61k)と 600pxのjpgファイル(57k)です。

 

原寸比較

jpgは最高画質で書き出しをしています。

ワードプレスで圧縮が掛かるのでしょうか?ブラウザ表示は元ファイルよりかなり汚いです。

600ピクセルjpg
↑jpgファイル(600px表示)
ガンダムTHEORIGINレビュー
↑SVGファイル(600px表示)

 

縮小比較

こちらもjpgがかなり汚いです。

600ピクセルjpg

↑jpgファイル(200px表示)
ガンダムTHEORIGINレビュー
↑SVGファイル(200px表示)

 

拡大比較

拡大するとjpgは汚なくて文字が頭にぱっと入ってきません。SVGはクッキリ綺麗で、なんか公式っぽい感じ。

600ピクセルjpg
↑jpgファイル(1200px表示)
ガンダムTHEORIGINレビュー
↑SVGファイル(1200px表示)

 

残念なことに比較はスマホ表示だと確認できないかも・・・
結論としては、圧倒的に綺麗な上、拡大縮小も自由自在なSVGの勝利といったところ。
※jpgは写真が得意
※SVGは劣化しないから当たり前の結果

 

ワードプレスで使うSVG画像のメリット

SVGは容量が軽く、画質がシャープでベタが綺麗

jpgのように圧縮によるモアレが出ないので画像がシャープです。

容量が軽く、拡大縮小しても画像が劣化しません。PC表示を踏まえて画像を作成すると画像サイズが大きくなり容量も大きくなります。SVGは大きさを気にすることなく作ることができます。

修正が容易です

jpgなどのビットマップ画像に比べると修正が簡単です。アプリ自体の動作も軽くて快適です。

 

ワードプレスで使うSVG画像のデメリット

SVGファイルはプログラムです。そのため内部に不正なプログラムを仕込まれる可能制は否定できません。自作している場合は問題なし。

上記の問題が関係していると思われますが、facebookやtwitterなどにシェアされたとき、キャッチ画像がSVGだと表示されません。

複雑なものはjpgより容量が大きくなる場合があります。適材適所で使いましょう。

 

SVG画像を作るアプリ

僕は、Adobe illustrator を使用しています。

最新のイラレはとても優秀なアプリですが月額制で値段が高くコストパフォーマンスが悪いです。

 

メルカリなどでバージョンの古いパッケージ版を探すのも手です。

※対応機種に注意(対応表はコチラ

 

フリーソフトもあります。「Inkscape(インクスケープ)」というソフトです。

win & mac に対応。

残念ながらmac os 10.7〜の対応なのでうちの古いmacでは使えず未検証です。

ダウンロードサイトはコチラ

Inkscape is professional quality vector graphics software wh…

 

あとがき

SVGは色々な場面で使われるロゴなどの画像に使うのが一般的なようです。

製作が快適なので、僕はキャッチ画像に多用しています。

SVGを使用するようになってからキャッチ画像の製作時間は大幅に短縮されました。

ちなみにプラグインSVG Supportは、ワードプレステーマ「THE THOR」で特に干渉もなく便利に利用できています。

呟くのよ・・・私の棒ストが