Webサイトのロゴやアイコンで、くっきりと美しい「SVG」形式の画像を使いたいと思ったことはありませんか？

SVG（スケーラブル・ベクター・グラフィックス）は、拡大・縮小しても画質が劣化しない、ファイルサイズが軽い、CSSやJavaScriptで色や形を動的に変更できるなど、多くのメリットを持つ画像形式です。レスポンシブデザインが当たり前になった現代のWeb制作において、非常に強力な武器となります。

しかし、多くの方が経験するように、WordPressのメディアライブラリにSVGファイルをアップロードしようとすると、「このファイルタイプはセキュリティの観点から許可されていません。」というエラーが表示されてしまいます。

この記事では、なぜWordPressがSVGのアップロードを制限しているのかという理由から、プラグインを使わずにfunctions.phpへの簡単なコード追記でSVGを有効化する方法、そして最も重要なセキュリティリスクを回避して安全に利用するための具体的な手順までを、詳しく解説します。

なぜWordPressはSVGをデフォルトで許可しないのか？

SVGが便利なファイル形式であるにも関わらず、WordPressが標準で対応していないのには、明確なセキュリティ上の理由があります。

SVGファイルは、その実体がJPEGやPNGのようなピクセルデータの集まりではなく、XML（テキストベースのマークアップ言語）で記述されています。このXMLの性質上、ファイル内に悪意のあるスクリプト（JavaScriptなど）を埋め込むことが可能です。

もし、攻撃者が悪意のあるスクリプトを埋め込んだSVGファイルをサイトにアップロードできてしまうと、以下のような被害が発生する可能性があります。

• クロスサイトスクリプティング（XSS）: サイト訪問者のブラウザ上で不正なスクリプトが実行され、個人情報が盗まれたり、別の悪性サイトに誘導されたりする。
• サイトの改ざん: 管理者権限が乗っ取られ、サイトの内容が書き換えられる。
• 不正な操作: ログインしているユーザーになりすまして、意図しない操作が行われる。

このような深刻なリスクを防ぐため、WordPressはデフォルトでSVGのアップロードを禁止しているのです。

解決策：functions.phpでアップロードを許可する

この制限を解除し、SVGをアップロード可能にする最もシンプルで軽量な方法が、テーマのfunctions.phpファイルにコードを追記することです。

この方法は、WordPressのupload_mimesというフィルターフックを利用します。このフックは、アップロードを許可するファイルの種類（MIMEタイプ）のリストを管理しており、ここにSVGを追加することで、アップロードが可能になります。

実装コードと手順

使用しているテーマのfunctions.php（子テーマ推奨）に、以下のコードを追記してください。

/**
 * WordPressのアップロード許可ファイルにSVGを追加する
 *
 * @param array $file_types 許可されているMIMEタイプの配列
 * @return array 変更後のMIMEタイプの配列
 */
function add_svg_to_upload_mimes( $file_types ) {
  // 新しく許可するファイルタイプを定義
  $new_filetypes = array();
  $new_filetypes['svg'] = 'image/svg+xml'; // 拡張子 'svg' に MIMEタイプ 'image/svg+xml' を割り当てる

  // 既存の許可リストと新しいリストを結合する
  $file_types = array_merge( $file_types, $new_filetypes );

  return $file_types;
}
add_action( 'upload_mimes', 'add_svg_to_upload_mimes' );

/**
 * WordPressのアップロード許可ファイルにSVGを追加する
 *
 * @param array $file_types 許可されているMIMEタイプの配列
 * @return array 変更後のMIMEタイプの配列
 */
function add_svg_to_upload_mimes( $file_types ) {
  // 新しく許可するファイルタイプを定義
  $new_filetypes = array();
  $new_filetypes['svg'] = 'image/svg+xml'; // 拡張子 'svg' に MIMEタイプ 'image/svg+xml' を割り当てる

  // 既存の許可リストと新しいリストを結合する
  $file_types = array_merge( $file_types, $new_filetypes );

  return $file_types;
}
add_action( 'upload_mimes', 'add_svg_to_upload_mimes' );

コードの解説:

1. add_action('upload_mimes', ...): WordPressがファイルをアップロードする際のMIMEタイプチェックの処理に、自作の関数を割り込ませます。
2. add_svg_to_upload_mimes($file_types): この関数が、実際に許可リストを操作します。
3. $new_filetypes['svg'] = 'image/svg+xml';: svgという拡張子と、それに対応するMIMEタイプimage/svg+xmlを定義します。
4. array_merge(...): 既存の許可済みMIMEタイプの配列に、先ほど定義したSVGの情報を追加します。
5. return $file_types;: SVGが追加された新しい許可リストをWordPressに返し、処理は完了です。

このコードを追記して保存すれば、WordPressのメディアライブラリからSVGファイルがアップロードできるようになります。

【最重要】安全に使うためのSVGサニタイズ（無害化）

functions.phpへの追記でSVGのアップロードは可能になりましたが、これだけでは前述のセキュリティリスクが残ったままです。
安心してSVGを利用するためには、アップロードする前に必ず「サニタイズ（無害化）」という一手間を加える必要があります。

サニタイズとは、SVGファイルの中から不要なデータや、<script>タグのような危険なコードを検知し、除去する作業のことです。

サニタイズの具体的な方法

① 信頼できるオンラインツールを利用する（推奨）

最も簡単で確実な方法は、SVG専用のサニタイズツールを利用することです。
・SVGOMG (https://jakearchibald.github.io/svgomg/)
このツールは、SVGの最適化（ファイルサイズ削減）と同時に、不要なコードや危険なスクリプトを除去してくれます。

使い方:

1. サイトにアクセスし、「Open SVG」ボタンからファイルを選択するか、ファイルを直接ドラッグ＆ドロップします。
2. 右側の設定パネルで最適化オプションを調整できますが、デフォルトのままでも十分に安全です。
3. 処理が終わったら、ダウンロードボタン（↓）をクリックして、サニタイズ済みのSVGファイルを保存します。

このサニタイズ済みのファイルであれば、安心してWordPressにアップロードできます。

②手動でコードを確認する

もしツールを使えない場合は、テキストエディタでSVGファイルを開き、中身を確認します。以下の様な記述がないかチェックし、もしあればそのSVGファイルは使用しないでください。

• <script>...</script>
• onclick="..."
• onmouseover="..."
• onerror="..."
• その他、onで始まるイベントハンドラ属性

まとめ

WordPressでSVGを利用することは、Webサイトの表現力を大きく向上させます。functions.phpに数行のコードを加えるだけで、その扉は簡単に開きます。

しかし、その便利さの裏側にあるセキュリティリスクを決して忘れてはいけません。

1. functions.phpでSVGのアップロードを許可する。
2. アップロードするSVGは、必ずサニタイズして危険なコードを除去する。
3. 信頼できる作成元から入手したSVGのみを利用する。

この3つのルールを守ることで、SVGのメリットを最大限に享受しつつ、サイトを安全に保つことができます。ぜひ、正しい知識を身につけて、あなたのサイト制作にSVGを取り入れてみてください。