SVGをWordPressにアップロードしようとしたら、「このファイルは許可されていません」というエラー表示。「え、普通に画像なのになんで？」って思ったことありませんか？
私も最初はよく分からなくて、とりあえずPNGに変換して対応していました。
でもあとから調べてみると、これ、WordPressの不具合ではなく、安全のためにあえて制限されている仕様だったんです。
この記事では、WordPressでSVGのアップロードが制限されている理由と、安全にSVGをアップロードできるようにするための方法をまとめました。
同じところでつまずいている人のヒントになれば嬉しいです。
そもそもSVGって何？
「そもそもSVGって何？」という方に向けて、まずはSVGの特徴を簡単に解説します。
SVGの特徴とは？
SVGは「ベクター形式」の画像です。これは、点の集まりでできた画像（PNG/JPGなど）とは違い、線や形の情報をもとに表示されるタイプの画像、という意味です。
そのため、サイズを変えても見た目が崩れにくく、Webサイトのいろいろな画面サイズに対応しやすい特徴があります。
また、SVGは画像として扱える一方で、内部はテキストベースのデータになっています。
この性質のおかげで、あとから編集しやすい一方、取り扱いには少し注意が必要な場面もあります（※詳しくは後述します）。
SVGのメリット
こうした特徴から、SVGは実務の中でもさまざまな場面で活用されています。
まず代表的なのが、ロゴやアイコンへの利用です。
SVGにしておくことで、小さなスマホ画面でも、大きなディスプレイでも、
同じファイルを使ってくっきり綺麗に表示できます。
また、シンプルなデザインであれば軽量になりやすいのもメリットです。
ロゴやアイコンのような単純な図形であれば、PNGやJPGよりファイルサイズが小さくなることもあり、
画像管理や表示速度の面でも扱いやすくなります
（※デザインが複雑な場合は例外もあります）。
さらに、CSSやJavaScriptを使えば、動きのある演出も比較的簡単に取り入れられます。
ロゴの線が描かれるアニメーションや、ホバー時に色が変わるアイコン、
スクロールに合わせて動くイラストなど、SVGはサイトにさりげない動きを加えてくれます。
そしてもうひとつ大きなメリットが、レスポンシブ対応のしやすさです。
複数サイズの画像を用意しなくても、1つのSVGでスマホから大画面まで対応できるため、制作や管理の手間を減らしやすいという利点もあります。
WordPressがSVGを制限している理由とは？
WordPressにSVGをアップロードすると、以下のようなエラーメッセージが表示されます。
これは正常な動作であり、WordPressが「危険だから止めたよ！」と教えてくれている状態です。
実は、SVGは画像に見えますが、中身はコード（XML）でできています。そのため、テキストエディタで開くと、画像そのものではなくコード（文字列）が表示されます。
SVGは、コードを編集することで、色を変えたり動きをつけたりできて便利な反面、もし悪意のあるコードが混ざっていると「画像」ではなくプログラムのように動いてしまうことがあります。
たとえば、SVGの中にスクリプト（ブラウザで動く命令）が仕込まれていると、ページを見た人の画面で勝手に別のサイトへ飛ばされたり、変な表示が出たりする原因になることがあります。こうした「ページ上で本来しないはずの動きを起こす攻撃」を、XSS（クロスサイトスクリプティング）と呼びます。
つまりSVGは、ただの画像として扱うつもりでも、扱い方次第ではセキュリティ事故につながる可能性があるため、WordPressは初期状態でアップロードを制限しているんです。
WordPressでSVGをアップロードできるようにする方法とは？
WordPressでSVGをアップロードできるようにする方法はいくつかありますが、ここでは、代表的な2つの方法と、それぞれの注意点を紹介します。
① プラグインを使う方法（おすすめ）
まず紹介したいのが、プラグインを使う方法です。WordPressにSVGのアップロードを許可しつつ、安全面にも配慮されたプラグインが用意されています。
代表的なものとしては、「SVG Support」 や 「Safe SVG」、「WP SVG Images」 などがよく使われています。どのプラグインを使う場合でも、「サニタイズ（無害化）機能があるかどうか」は必ず確認しましょう。
プラグインの導入手順
導入手順は以下の通りです👇
- WordPress管理画面 → プラグイン → 新規追加
- 「SVG Support」または「Safe SVG」などで検索
- インストール → 有効化
- メディアライブラリからSVGをアップロード
これで完了です。
※詳しい設定方法や細かい使い方については、各プラグインの公式ページや解説記事をご確認ください。
実際に私も「SVG Support」を使っていますが、設定が分かりやすく、特に難しい操作をしなくても、SVGを安全にアップロードできるようになるので助かっています。
② functions.phpを編集する方法（注意が必要）
テーマの functions.php に以下のコードを追記すると、WordPressでSVGファイルをアップロードできるようになります。
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
return array_merge($file_types, $new_filetypes);
}
add_filter('upload_mimes', 'add_file_types_to_uploads');
この方法を使えば、確かにSVGのアップロードは可能になります。
ただし、SVGファイルの中身をチェックしたり、危険なコードを取り除いたりする処理は行われません。
そのため、この方法は仕組みを理解している方向けで、初心者の方やクライアントサイトではあまりおすすめできません。
SVGを安全に使うために欠かせない「サニタイズ」とは？
SVGを扱ううえで欠かせないのが、「サニタイズ」という考え方です。
あまり聞き慣れない言葉かもしれませんが、簡単に言えばSVGを安全な状態に整える作業のこと。
SVGファイルの中には、 スクリプトタグやiframeタグといった「動作を伴うコード」を書けてしまう仕組みがあります。
この仕組みが悪意ある人に利用されると、サイト訪問者のブラウザで勝手にスクリプトが動いてしまう可能性があります。そんなリスクを防ぐために、サニタイズ処理（無害化）が必要になるんです。たとえるなら、「アップロード前にウイルスチェックをするようなもの」です。
SVGの中から危険なタグや不正なリンクを自動で取り除き、安心して使える“きれいなファイル”にしてくれる仕組みです。
たとえば、怪しいJavaScriptを削除したり、外部URLの呼び出しを無効化したり、構文エラーを修正してくれることもあります。
一度設定しておけば、毎回自動で処理してくれるので、自分でファイルを開いてチェックする手間もなくなります。
私も実務では、プラグインでサニタイズを自動化し、アップロードできるユーザーを必要最小限に絞る運用にしています。
「アップロードできる＝安全」ではなく、誰が・どんなファイルを・どの方法でアップロードするかまでを含めて管理するのがポイントです。
特にクライアントサイトでは、権限管理までセットで考えることで、余計なトラブルを防ぎやすくなります。
プラグインを入れてもSVGが使えないときの対処法
プラグインを入れてもSVGがアップロードできない場合、設定や環境が原因になっていることがあります。ここでは、よくあるポイントを順番に確認していきましょう。
プラグインが有効化されているか確認する
まずは、SVG関連のプラグインがきちんと有効化されているかを確認します。
インストールしただけで有効化されていなかったり、マルチサイト環境ではネットワーク有効化が必要なケースもあります。
サーバー設定やSVGファイル自体を確認する
プラグインが有効でもアップロードできない場合は、以下のような原因が考えられます。
- サーバー側でSVG用のファイル形式（ image/svg+xml）が許可されていない。
- キャッシュが残っていて、設定変更が反映されていない。
- SVGファイル自体に構文エラーがある。
一度、別のSVGファイルを試してみるのも切り分け方法として有効です。
他のプラグインとの競合を確認する
画像最適化系のプラグイン（EWWW Image Optimizer など）が、SVGを処理しようとして競合するケースもあります。
その場合は、一度それらのプラグインを停止し、SVGがアップロードできるかを確認してみましょう。
どうしても解決しない場合
それでも改善しない場合は、サーバー側の設定が影響していることもあります。
Apacheサーバーを利用している場合は、.htaccess に以下の記述を追加することで改善するケースがあります。
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
※ .htaccess はサーバーの動作に関わる重要なファイルです。
編集する場合は、事前にバックアップを取るか、不安な場合はサーバー会社のサポートに確認するようにしてください。
多くの場合は、プラグインの設定や環境の見直しで解決します。一つずつ確認していけば、原因が見えてくるはずです。
まとめ
WordPressでSVGがアップロードできないのは、不具合ではなく安全のための仕様です。
SVGは便利な画像形式ですが、中身がコードでできているため、初期状態では制限されています。SVGを使う場合は、サニタイズ（無害化）機能があるプラグインを使う方法がおすすめです。
また、「アップロードできる＝安全」ではないので、権限管理など運用面にも注意しましょう。
SVGの仕組みと注意点を理解したうえで使えば、ロゴやアイコンなどをきれいに表示でき、Webデザインの幅も広がります。
ぜひ安全な方法で、SVGの便利さを活かしてみてください。
コメント