WordPress

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

WordPressでは使えないSVG形式

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

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

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

SVG形式の画像って?

従来の画像形式ではラスタ形式

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

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

SVG形式はベクトル形式

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

メリット・デメリットは?

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

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

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

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

Can I use… Support tables for HTML5, CSS3, etc

WordPressのバージョンで対応が変わる

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

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

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

プラグインで解決(今のところ)

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

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

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

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

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

自分のサイトに合ったイラスト素材がない、と嘆く方に!イラストカラーをカスタマイズできる商用無料サイト | Logic+A design

Sponsored