実践 WordPress ホーム > メディア管理

WordPress で SVG ファイルを扱う方法

SVG (Scalable Vector Graphics) ファイルは画像をベクター方式で表現したファイルです。 その一番の特徴は拡大・縮小しても画像が粗くならないことです。

ウェブサイトの埋め込み画像でよく使われている PNG や JPEG はいわゆるビットマップ方式と呼ばれる形式のもので、 SVG とは異なり拡大・縮小すると画像が粗くなってしまいます。

ウェブサイトで扱う画像のほとんどには PNG や JPEG （あるいは WebP や AVIF ）が適していますが、中には SVG の方が適している画像もあります。 SVG の方が適している画像は PNG や JPEG ではなく SVG ファイルとして提供することで、画質の向上とファイルサイズの削減が実現できます。

ただし、 WordPress 本体（原稿作成時点での最新バージョン 6.4 ）はデフォルトで SVG ファイルのアップロードに対応していません。 ここでは WordPress で SVG ファイルを扱う方法を説明します。

方法 A. コードを書く方法

A-1. テーマの functions.php を使う

テーマの functions.php ファイルを使う方法です。

1. 有効なテーマの functions.php ファイルを開きます

2. 次のコードをファイルの末尾に追加します

   /**
    * SVG ファイルをアップロードできるようにする
    */
   function mytheme_upload_mimes( $mimes ) {
       $mimes['svg'] = 'image/svg+xml';
       return $mimes;
   }
   add_filter( 'upload_mimes', 'mytheme_upload_mimes' );
   

   • mytheme_ の部分は半角英字でテーマ名などに変更してください

3. 変更を保存します

これで WordPress 管理画面の「メディアライブラリ」ページから SVG ファイルのアップロードが可能になります。

A-2. カスタムプラグインを作る

カスタムプラグインを作る方法です。

テーマの functions.php ファイルを使う方法はお手軽でかんたんですが、 SVG をアップロード可能にする設定が利用中のテーマに依存してしまうというデメリットがあります。 functions.php を使うと将来的に別のテーマに変更したくなったときに SVG アップロードの設定を移行する手間がかかります。 カスタムプラグインを書いてそこで設定するようにすればテーマの変更やリニューアルが容易になります。

1. カスタムプラグインのディレクトリを用意します
   • WordPress インストールディレクトリの wp-content/plugins の下に myplugin というディレクトリを作成します

2. プラグインファイルにコードを記述します

   • 作成した myplugin ディレクトリの下に myplugin.php ファイルを作成します

   • myplugin.php に次の内容を記述します

     <?php
     
     /*
      * Plugin Name: My Plugin
      * Description: SVG ファイルのアップロードを可能にするカスタムプラグイン。
      */
     
     /**
      * SVG ファイルをアップロードできるようにする
      */
     function myplugin_upload_mimes( $mimes ) {
         $mimes['svg'] = 'image/svg+xml';
         return $mimes;
     }
     add_filter( 'upload_mimes', 'myplugin_upload_mimes' );
     

3. 作成したカスタムプラグインを有効にします

   • 管理者ユーザーで WordPress 管理画面にログインします
   • サイドメニューの「プラグイン」 → 「インストール済みプラグイン」をクリックします
   • プラグインの一覧ページが表示されるので「 My plugin 」の行の「有効化」リンクをクリックします

これで functions.php を使う方法と同様に、 SVG ファイルのアップロードが可能になります。

プラグイン名は myplugin である必要はありません。 ファイル名や関数のプリフィックスは適宜変更してください。

なお、プラグインのメタ情報で必須なのは Plugin Name の行だけです。 Description の行は書いておいた方が後々の管理が楽になりますが、非必須なため省力しても動作上は問題ありません。

方法 B. コードを書かずプラグインを使う方法

コミュニティプラグインを使う方法もあります。

選択肢がいくつかありますが、おすすめは定番の SVG Support か Safe SVG です。

• SVG Support – WordPress プラグイン
• Safe SVG – WordPress プラグイン

2024 年 3 月時点で SVG Support は 100 万、 Safe SVG は 90 万インストール以上となっています。 どちらも利用者からの評価も非常に高いです。

ということで、 WordPress で SVG ファイルを扱えるようにする方法にはいくつかのアプローチがあるので、これらの中からサイトの管理体制や実装を担当する方の知識レベルに合った方法を選んでください。

SVG を扱うときの注意点

SVG ファイルの中身は XML 形式で書かれたプレーンテキストです。 悪意のある利用者が SVG ファイルをサイトにアップロードできると、深刻なセキュリティ問題につながるリスクがあります。

そのため、 WordPress サイトで SVG ファイルのアップロードを可能にする場合は次の 2 点を守るようにしてください。

• SVG ファイルのアップロードは信頼できるユーザーだけが行えるようにする
• SVG ファイルは信頼できるソースからのものだけを使用する

公式リファレンス

• upload_mimes – Hook | Developer.WordPress.org