WordPressで記事投稿内にSVG形式の画像を使う方法

WordPressの「メディア」＞「新規追加」などで画像ファイルをアップロードする際、SVG形式のファイルをアップロードしようとすると

セキュリティ上の理由によりこのファイル形式は許可されていません。

という警告が出てアップロードできません。

画像形式の1つですが、jpegやpngなど他の画像形式ではピクセルを並べて描画しています。
レトロゲームのドットのような感覚ですね。

元の大きさよりも拡大するとギザギザになった、いわゆる劣化した状態になります。

一方SVGではパスで描画しているため拡大しても劣化せずに描画できるので、PCとスマホなど違う環境で同じ画像を使うときなどに強いです。

SVGは拡大縮小に強く、ファイルサイズも小さくなるケースが多いです。

ただパスで表示する仕様のため、ロゴやタイポグラフィやパスで描いたイラストなどであれば非常に適していますが、写真などの複雑な表示には向いていません。

逆にロゴなどであれば、1ファイルで複数の場所で使い回しても問題ないので、上手く使い分けましょう。

また、対応ブラウザにも注意が必要です。
古めのブラウザでの対応も考慮する場合は気をつけましょう。

SVGはラスタ形式の画像と違い、大元はテキストで出来ています。
なので悪意のあるJavaScriptなどが埋め込めてしまう危険性があるため、WordPress側ではセキュリティブロックしているとのことです。

そのためか、少し前のバージョンで使えていた方法も最新版では次々と使えなくなっているようでした。

functions.php にSVGを使えるようにするためのコードを記述する方法は調べるといくつか出てくるのですが、WordPressのバージョンは記事執筆時で 5.0.3 ではどれも上手く動作しなくなっているようです。

Safe SVG | WordPress.org執筆時（2019.1.18）ではこのプラグインで上手く動くようになりました。

インストールして有効化するだけでOKです。
あとは今まで通りの方法でSVG画像をアップロードしてもエラーが出ず動作するようになります。

ただ他にも同様のプラグインはいくつかあったのですが、少し前まで動いていたものも現バージョンでは動かなくなっているものも多く、最新版に対応していないとおそらくWordPress側で対策されてしまうようです。

なのでSVGを多用する場合はWordPressのバージョン、プラグインの対応状況も常に気をつけましょう。

SVGを使う場合、下記の記事でおすすめのイラストサイトを紹介しています。
こちらもよろしければどうぞ。

お読みいただきありがとうございます