デフォルトでは、WordPressでロゴやアイコンをアップロードしようとしたら、SVGファイルだけ弾かれてエラーになります。
WordPressは標準の状態ではSVG画像のアップロードを許可していません。
今回はプラグインを使って安全にSVGを扱う方法をまとめてみます。
WordPressでSVG画像がそのまま使えない理由
SVGファイルの中にスクリプトを仕込んで攻撃に使われるリスクがあるため、WordPressは初期設定でSVGのアップロードをブロックしています。
SVGはテキストベースのファイル形式なので、見た目は画像でも中身にコードを埋め込むことができてしまうんですよね。
悪意のある第三者がそれを利用して、サイトに不正なスクリプトを混入させる可能性があるためです。
sugaiSVGって中身はコードで出来ていて、コードエディタで内容を編集できるのです。
方法：プラグイン利用で簡単に解決します
WordPressでSVGを安全に扱うなら、「SVG Support」もしくは「Safe SVG」というプラグインを使うのがおすすめです。
このプラグインは、アップロードされたSVGファイルから不要なコードを自動で取り除いてくれるものです。難しい設定をしなくても、インストールするだけで対応できます。
プラグインのインストール手順
検索＞インストールして有効化するだけです。
- 管理画面の「プラグイン」→「新規追加」を開く
- 検索窓に「SVG Support」もしくは「Safe SVG」と入力
- 「今すぐインストール」をクリックする（どちらのプラグインでもOK）
- 「有効化」をクリックする
以上。これだけで、特別な設定を触らなくてもSVGファイルがアップロードできるようになります。
あとはメディアライブラリにアップロードするだけ
有効化後は、通常の画像と同じようにメディアライブラリからSVGファイルをアップロードできます。ブログへの使用方法も、他の画像形式と変わりません。
SVGファイルとは？
SVGは大きさを変更しても画質が劣化しない、ベクター形式の画像です。
ロゴやアイコンのように、サイズを変えて使い回すことが多い画像に向いています。
一方でPNGやJPGはピクセルで構成された画像なので、拡大すると輪郭がぼやけてしまうことがあります。使い分けのイメージをつかんでおくと、SVGを導入する理由も分かりやすくなるかなと思います。
| 形式 | 特徴 | 向いている用途 |
|---|---|---|
| SVG | 拡大縮小しても劣化しない、ファイルが軽い | ロゴ、アイコン、シンプルな図形 |
| PNG | 透過に対応、写真のような複雑な画像も扱える | 写真、背景が透明な画像 |
| JPG | 圧縮率が高くファイルが軽い | 写真 |
sugaiロゴをSVGに差し替えると、サイトの見た目がぐっとシャープになりますよ！
プラグインを使うメリットと気をつけたいこと
メリットとしては、やはりセキュリティ面の安心感が大きいです。中身をサニタイズしてくれるので、知識がなくても危険なコードが混入する心配が減ります。
ただし、プラグインを入れたからといって完全に安全というわけではありません。信頼できない配布元のSVGファイルはできるだけ避けたほうが無難です。
- SVGファイルの入手元は信頼できるか確認する
- プラグインは定期的にアップデートしましょう（なるべく自動更新オンに）
- 不要になったプラグインは放置せず整理する
SVG画像を使う際によくあるトラブルは？
よくあるのは、プラグインを入れたはずなのにアップロードできないというケースです。多くの場合、プラグインが有効化されていなかったり、サーバー側の設定が関係していたりします。
また、SVGファイル自体が壊れている場合や、対応していないSVGの書き方になっている場合にも表示がおかしくなることがあります。トラブルが起きたときは、まずプラグインの有効化状態とファイルの中身を確認してみるとよさそうです。
sugaiうまく表示されないときは焦らず、ひとつずつ原因を切り分けていくのがポイント！
まとめ
WordPressではSafe SVGのようなプラグインを使えば、SVGは簡単に使えるようになります。
ロゴやアイコンをすっきり見せたい方は、ぜひ試してみてください。