こんにちは、mickです。
SVGをWordPressにアップロードでなくて困った
WordPressでSVGが使えないって本当？
それでもSVGをWordPressで使いたい
こんな疑問や要望を持つ方に応えます。
ボランティアでWebサイトを構築する際の出来事。Webページのデザイン。
「これならbefore擬似クラスにアイコンじゃなくてSVGを使えたら最高じゃん」
とか思ってたら、WordPressからSVGをサポートしてないと怒られて初めて知った事実。
頭の整理もあって、記事にしています。
また、SVGを使う、使わないの対処法も載せました。
WordPressにSVGをアップロードできない
WordPressは、SVGをサポートしてません。
最初にこれを知ったときはーー
えっ画像ファイルをサポートしてないなんてマジかよWordPress…
なんて思ってました。
でもSVGとセキュリティのことを調べるとWordPressがデフォルトでSVGを理解できます。
SVGは拡大と縮小に強いベクター画像
まずはSVGのおさらいから。
SVGがデザインで好まれる理由は、画像の拡大と縮小に強いベクター画像だから。
ベクター画像は、計算式を使って図形を再現して画像をつくるのが、拡大と縮小に強い理由です。
JPEGやPNGはラスター画像
じゃあJPEGやPNGは何なのかといったら、それはラスター画像です。
ラスター画像は、すでに色の付いたピクセルデータを持っていて、それを規則正しく縦横にならべて画像をつくります。
最初から、縦と横のピクセルの数が決まっているので、拡大や縮小をすると画像が潰れたり不足することで、劣化したように見えるわけです。
SVGは画像じゃなくてテキストファイル
SVGは、細かくいうとテキストファイルです。
画像ファイルじゃないんです。
うそだー
と思った方。
SVGをテキストエディタで開いてみるとわかります。
このネコの手形のSVGをテキストエディタで開くと、次のような表示がでてきます。
<svg viewBox="0 0 800 634.906" width="127" xmlns="http://www.w3.org/2000/svg"><g fill="#040000"><path d="m253.522 362.199c-51.909 51.867-79.437 106.391-75.453 149.65 7.391 81.826 75.523 106.529 148.015 120.992 19.087 3.857 23.208-16.488 25.891-29.93 4.99-24.914 11.263-55.766 61.58-58.994 52.035-3.34 64.96 23.083 75.356 44.378 5.967 12.24 14.936 30.698 34.54 21.615 70.242-32.78 123.507-63.535 117.023-135.146-4.065-44.21-39.026-95.253-93.562-136.46-52.623-39.724-112.762-61.872-157.042-57.861-35.926 3.298-90.741 36.149-136.348 81.756z"/><path d="m335.64 107.32c38.341 60.558 31.216 133.762-15.887 163.539-46.977 29.846-116.283 4.974-154.582-55.57-38.412-60.588-31.272-133.833 15.845-163.595 47.075-29.804 116.311-4.919 154.624 55.626z"/><path d="m152.051 276.518c42.072 39.474 51.364 98.062 20.583 130.842-30.657 32.781-89.776 27.289-131.877-12.17-42.129-39.529-51.322-98.076-20.611-130.912 30.685-32.766 89.734-27.247 131.905 12.24z"/><path d="m758.266 360.313c-42.212 38.258-100.591 42.603-130.395 9.74-29.692-32.85-19.603-90.503 22.622-128.803 42.311-38.243 100.675-42.576 130.451-9.726 29.733 32.894 19.603 90.518-22.678 128.789z"/><path d="m629.184 172.629c-25.388 72.045-91.382 114.424-147.415 94.654-56.017-19.759-80.847-94.193-55.43-166.166 25.431-72.116 91.411-114.397 147.428-94.696 56.031 19.8 80.861 94.22 55.417 166.208z"/></g></svg>これでSVGがXML書式のテキストファイルだとわかります。
テキストファイルに悪意あるコードを埋め込める
SVGは、テキストファイルだということでここに悪意あるコードを埋め込むことができます。
これが、SVGがセキュリティの関係で使えないことがある理由です。
だから、別にSVGを使うセキュリティのリスクは、WordPressに限ったわけじゃあないです。
ココのWebサイトに、SVGにJavaScriptを埋め込んで実行するサンプルが載ってます（XXE攻撃）。
怖！笑
こうやってSVGには、XSS攻撃やXML書式特有のXXE攻撃に利用されるので、WordPressは安全面を理由に標準ではサポートしてないわけです。
WordPressは、Webシステムなのでなおさらな気もします。
SVGの代わりならPNG
まずSVGの代わりとして候補になるのはPNGです。
WordPressでSVGを使いたときは、サイトのロゴだったりオリジナルで用意したアイコンといった比較的画像サイズが小さいものだと思うからです。
PNGは可逆圧縮というのもあり、多少の画像の拡大や縮小には強いです。
また、透過PNGといって背景を透明にした状態でも使えるため、SVGのような感覚で使える点も、代替案として使える理由。
SVGをPNGに変換するときは、ココのWebサービスが便利。
どうしてもSVGをWordPressで使いたい！
という方は、いまはプラグインという選択肢になります。
WordPress5系になってから、funcions.phpを編集する方法はNG
おとなしく？プラグインを使うのがトラブルが少なそう。
紹介するのは、SVG Support と Safe SVG。
どちらも検索すればすぐにでてくるメジャーなプラグイン。
とりあえず使ってみるなら有効化するだけで使える SVG Support が簡単でオススメ。
SVG Support プラグイン
一番簡単なのは SVG Support プラグイン。
インストールして有効化するだけでOK。
あとは、JPEGやPNGと同じような感覚でメディアライブラリに登録して使います。
⇒ 【WordPress】プラグインで有効化！WordPressでSVG画像をアップロードする方法
Safe SVG プラグイン
もうひとつメジャーなのは Safe SVG プラグイン。
Safe とついているだけあって、怪しいSVGを使うのを防ぐ機能がついています。
Pro版にすると、それがさらに強力に。
安心をお金で買う、ってやつですね。
⇒ How to Enable WordPress SVG Support
まとめ。WebサイトのSVG採用率は上がっている
WordPressがSVGをサポートしてない話とその対処法を紹介しました。
SVGがWordPressにアップロードできないときは、びっくりしたけど調べてみると色々わかって面白かったです。
セキュリティが不安ならWebサイトで使うのを避けるべきSVG。
でもデータによると、年々Webサイトでの利用率はあがっています。
統計によると、すべてのWebサイトの内29.9%がSVGを利用している（W3Techs ）。
2015年5月21日では、11.9%だったようで、かなりの伸び率じゃないかと。
それでも、セキュリティ対策が理由でWordPressがサポートするとは考えにくい。
幸い、WordPressにはプラグインがあるので、それで対処するのがよさそうです。
記事を読んでくれて嬉しいです。
今日もありがとうございました。
初稿 2021/01/24
