WordPressでSVGを扱うための設定

初期状態のWordPressでSVG画像をアップロードしようとすると、次のようにエラーとなります。

wordpress-svg-error

WordPressがSVGをサポートしていないためです。SVG画像を扱うためには、WordPressの持つファイル種別のリストに自分でSVGの定義を追加してやる必要があります。

SVGの定義を追加するには、次のような方法があります。

  • プラグインを利用する。
  • functions.phpを編集する。

いずれの方法も、実際に中でやっていることはほぼ同じです。自分の環境に応じて使いやすい方法を採用すれば良いと思います。

ただし、現状のWordPressはベクター画像を正式にはサポートしていません。そのため、SVGを使えるようにした場合でも、いくつかの制限事項があります。まず、メディアライブラリでの一覧表示でサムネイルが表示されません。次に、投稿画面の「メディアを追加」からベクター画像を選択して「画像を編集」すると「画像のデータが存在しません」というエラーなります。実際に画像データがなくなっているわけではなく、メディアライブラリから選択すれば編集可能です。

プラグインを利用する

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG)」は、メディアライブラリでSVGを扱えるようにするプラグインです。インストールして有効にするだけで、特に設定不要でSVGが扱えるようになります。

Manage Upload Types

Manage Upload Types」は、メディアライブラリで扱えるファイルタイプを追加したり制限したりするプラグインです。SVGに限らず、EPSなど他のタイプも追加したい場合に利用すると良いでしょう。

インストール後、管理メニューの「設定 → メディア」で拡張子とメディアタイプを追加します。

manage-upload-types-settings

functions.phpを編集する

functions.phpを編集して次の行を追加すると、SVGが扱えるようになります。

function my_ext2type($ext2types) {
    array_push($ext2types, array('image' => array('svg', 'svgz')));
    return $ext2types;
}
add_filter('ext2type', 'my_ext2type');

function my_mime_types($mimes){
    $mimes['svg'] = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'my_mime_types');

function my_mime_to_ext($mime_to_ext) {
    $mime_to_ext['image/svg+xml'] = 'svg';
    return $mime_to_ext;
}
add_filter('getimagesize_mimes_to_exts', 'my_mime_to_ext');