Webデザインの現場で欠かせないファイル形式のひとつが SVG です。
軽量で、どれだけ拡大縮小しても劣化しないため、ロゴやアイコン、イラストなど幅広く活用できます。
でもいざWordPressにアップロードしようとすると「このファイルは許可されていません」とエラーが出てしまい、作業が止まってしまうことが多いんです。私も、初めてSVGを使ったときに同じ壁にぶつかりました。
実はこれはWordPressの仕様による制限で、セキュリティ上の理由からSVGを標準では禁止しているのです。
本記事では、その背景と安全な解決策を解説します。
さらに、実務で役立つ活用例やセキュリティ対策も合わせて紹介するので、これを読めばSVGを安心して使いこなせるようになります。
WordPressでSVGがアップロードできない原因
SVGの特徴とメリット
SVGはベクター形式の画像で、以下の強みがあります。
- 解像度に依存しない（拡大縮小しても劣化しない）
- PNGやJPGよりファイルサイズが小さい
- CSSやJavaScriptで自由にカスタマイズ可能
例えば、アイコンを20pxから200pxまで拡大するケースを考えてみましょう。
PNG形式 → 20px画像を拡大するとぼやける
SVG形式 → どのサイズでもクッキリ表示
このように、SVGは「解像度フリーな画像」としてとても優秀なんです。
WordPressがSVGを制限している理由
WordPressがSVGを標準で禁止している理由は セキュリティリスク です。
SVGはただの画像ではなく、XMLベースのテキストファイル。
そのため以下のような攻撃が可能になってしまいます。
- JavaScriptを埋め込み → クロスサイトスクリプティング（XSS）
- 外部URL呼び出し → マルウェア感染のリスク
つまり「画像の皮をかぶったプログラム」になり得るんですね。
エラーが出るときの具体的な画面例
WordPressにSVGをそのままアップロードすると、以下のようなメッセージが出ます。
これは正常な動作であり、WordPressが「危険だから止めたよ！」と教えてくれている状態です。
私が実務を始めた頃、最初につまずいた作業のひとつです。スクールで、ロゴはsvg形式推奨と習ったので、
アップロードできないと出てきて、困りました。ですが下記の設定で簡単に解決できるので、ぜひ実践してみてください。
SVGをアップロードする2つの方法
①functions.phpを編集する
テーマのfunctions.phpに以下を追加するとSVGを許可できます。
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 Support」は、SVGをサニタイズして安全にアップロードできるプラグインです。
導入手順は以下の通り👇
- ダッシュボード → プラグイン → 新規追加
- 「SVG Support」と検索
- インストール → 有効化
- メディアライブラリからSVGをアップロード
SVGとセキュリティの深い関係
SVGに潜む脆弱性の仕組み
SVG内部に以下のようなコードを仕込むことが可能です。
<script>alert("攻撃!");</script>
これを読み込んだ訪問者のブラウザで不正な動作が発生します。
実際に起きたSVGを悪用した攻撃例
- 2017年：某SNSでSVGを使ったクロスサイトスクリプティング攻撃が確認される
- 2019年：不正SVGを埋め込んだWordPressサイトがフィッシングサイトにリダイレクト
こうした事例があるため、WordPressはSVGを禁止しているのです。
SVGを無害化する「サニタイズ」という考え方
「サニタイズ」とは、不要・危険なタグを削除して安全な状態にすること。
Safe SVGなどのプラグインはこの仕組みを自動で実行してくれます。
4. セキュリティを守る実践的な工夫
SVGファイルの中身を確認する方法
VSCodeやSublime TextなどのエディタでSVGを開けば、中身がテキストで見えます。<script>やhttp://不審なURL が含まれていたら危険です。
サニタイズを自動化する仕組み
Safe SVGを導入すれば、アップロードのたびに無害化処理が自動で走るため安心です。
WordPress用セキュリティプラグインの組み合わせ
以下のプラグインを併用するとより安心です。
・iThemes Security
・Wordfence Security
・All In One WP Security
5. 実務で役立つSVGの活用シーン
ロゴ・アイコンに利用するメリット
- 拡大しても美しい
- デバイス解像度に依存しない
- サイト全体の軽量化に貢献
アニメーションやインタラクションの活用事例
- ロゴが線で描かれるアニメーション
- ホバー時にアイコンの色が変化
- スクロールに応じてイラストが動く
レスポンシブ対応と表示速度改善への貢献
1つのSVGでスマホ〜4Kまで対応可能。
複数サイズの画像を用意する必要がなく、表示速度も向上します。
6. トラブルシューティング大全
アップロードできないときの原因チェックリスト
- プラグインを導入していない
- サーバーがMIMEタイプを制限している
- キャッシュが残っている
アップロード後に表示されない場合の解決策
- キャッシュ削除
- サーバー設定を確認
- テーマ側の制約を見直す
サーバー側のMIMEタイプ制限の回避方法
.htaccessに以下を追記すると解決する場合があります。
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
プラグイン競合エラーの見分け方
1つずつプラグインを停止して確認。
画像最適化プラグインが原因のことが多いです。
7. まとめ：安全にSVGを使ってデザインの幅を広げよう
WordPressでSVGをアップロードできないのは「セキュリティを守るための仕様」です。でも、Safe SVGなどのプラグインを使えば安全に利用できます。
今回のポイント👇
- SVGは便利だがリスクもある
- functions.phpよりプラグイン利用が安心
- ファイル中身を確認＋セキュリティプラグイン併用がベスト
SVGを正しく使えば、デザインの表現力とサイト速度改善を同時に実現できます。
ぜひ導入して、Webデザインの幅を広げてみてくださいね！
コメント