SVGファイルをWordPressにアップロードしようとしたときに、
「このファイルタイプはセキュリティ上の理由からアップロードできません」
というエラーが出てしまった経験はありませんか？
ロゴやアイコンなどを高画質のまま軽量に扱えるSVGは、サイトデザインに欠かせないファイル形式です。
しかしWordPressでは初期設定のままではアップロードが制限されているため、思うように使えないと悩む方も多いでしょう。
この記事では、WordPressでSVGをアップロードできない原因とその解決法を徹底解説します。
プラグインで簡単に解決する方法から、functions.phpにコードを追加する方法、SEOやセキュリティ面での注意点までカバーします。
なぜWordPressでSVGがアップロードできないのか？
WordPressは、初期状態ではSVGファイルのアップロードを禁止しています。
理由はシンプルで、セキュリティ上のリスクがあるからです。
SVG（Scalable Vector Graphics）はXMLベースのファイル形式であり単なる画像ではなく「テキストデータで構成された描画命令」です。
この仕組みを悪用すれば、悪意のあるスクリプトを仕込むことも可能です。
実際にSVGをアップロードしようとすると、以下のようなエラーメッセージが表示されます。
- 「このファイルタイプはセキュリティ上の理由からアップロードできません。」
これはWordPressがユーザーを守るために設けた制限です。
安全に使うには、対策を講じたうえでアップロードを有効化する必要があります。
SVGをアップロードする方法（解決策）
SVGを利用する方法は大きく3つに分かれます。
初心者はプラグインの導入が最も簡単で安全ですが、中級者以上であればfunctions.phpにコードを追加する方法も選択肢になります。
方法1：プラグインを使う（初心者向け）
最も簡単で安全性が高い方法は、専用のプラグインを導入することです。
特におすすめは以下の2つです。
Safe SVG
- 自動的にSVGファイルをサニタイズ（安全化）してくれる
- 初心者でも安心して利用可能
- 導入手順：
- 管理画面「プラグイン > 新規追加」から「Safe SVG」を検索
- インストールして有効化するだけ
SVG Support
- インラインSVGとして利用できる
- CSSやJavaScriptによるアニメーションにも対応可能
- 高度なカスタマイズをしたい人向け
メリット: 簡単、安全、メンテナンス不要
デメリット: プラグインを増やしたくない人には不向き
方法2：functions.phpにコードを追加（中級者向け）
プラグインを使わずに軽量に仕上げたい方は、テーマのfunctions.phpに以下のコードを追加します。
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes);
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');このコードにより、SVGが許可されるようになります。
ただし、この方法はアップロードを許可するだけで、サニタイズ等のセキュリティ対策は一切含まれません。
外部由来のSVGにはXSSなどの悪意あるコードが含まれる可能性があるため、本番運用や初心者は Safe SVG などサニタイズ機能付きプラグインの併用を強く推奨します。
方法3：エラーごとの対処法
実際にSVGをアップロードしても、状況によっては次のような問題が起こります。
- アップロードできない
→ プラグイン未導入、またはfunctions.phpの記述漏れ。 - プレビューされない
→ テーマや他プラグインとの相性が原因。SVG Supportを利用すれば解決する場合が多い。 - 「このファイルタイプは…」のエラーが消えない
→ サーバーのMIMEタイプ設定が原因の可能性。レンタルサーバーのサポートに確認するのも手です。
SVGを安全に使うためのセキュリティ対策
SVGは便利ですが、セキュリティを軽視すると危険です。
安全に利用するためには以下を徹底しましょう。
- 信頼できるソースのSVGのみを使用する
- 不要なタグやスクリプトを削除してから利用する
- Safe SVGのようなプラグインで自動サニタイズする
「functions.phpの追加だけ」で済ませるのはリスクが高いため、初心者は必ずプラグインを使うことを推奨します。
SVGを使うことでSEOに不利益はある？
「SVGを使ったらSEO的に不利になるのでは？」と心配する人もいますが、結論から言えば不利益はありません。
不利益はない理由
- GoogleはSVGを画像として認識可能
- PNGやJPGと同様にインデックス対象になる
- 軽量でページ表示速度を改善できるため、SEO的にはむしろプラス
注意点
- alt属性は必須：SVGでも
altを入れることで検索エンジンに内容を伝えられます。 - インラインSVGの扱い：HTMLに直接書き込むインラインSVGは、Google画像検索で「画像」として認識されにくいケースが報告されています。Google公式の明確な見解はありませんが、実務上の観測として留意してください。画像検索からの流入を重視する場合は、
<img src="xxx.svg">形式のほうが安全です。 - セキュリティリスク：不正SVGが原因でサイトが侵害されれば、SEOにも悪影響が出ます。
FAQ（よくある質問）
- QSVGがアップロードできないのはなぜ？
- A
WordPressがセキュリティ上の理由から禁止しているためです。プラグインやfunctions.phpの設定で有効化できます。
- QSafe SVG以外の方法でも安全？
- A
可能ですが、サニタイズ処理を自分で行う必要があり初心者には不向きです。
- QSVGは全ブラウザで表示される？
- A
主要ブラウザ（Chrome、Firefox、Edge、Safari）は対応済みですが、古いブラウザでは非対応の可能性があります。
- QSVGを使うとサイトが重くなる？
- A
いいえ。SVGは軽量なため、むしろサイトの表示速度改善に役立ちます。
まとめ
- WordPressはSVGをセキュリティ上の理由から標準で禁止している
- 解決法は「プラグイン利用」が最も簡単で安全
- functions.php編集でも対応できますが、サニタイズは自動で行われません。初心者や業務サイトでは、Safe SVG などのプラグイン併用を推奨します。
- SVGはSEO的に不利益はなく、軽量で表示速度改善に役立つ
SVGを正しく活用すれば、ロゴやアイコンを美しく表示できるだけでなく、サイト全体のユーザー体験向上にもつながります。ぜひ本記事を参考に、安全に導入してみてください。
