WordPress Logo

ワードプレスの［メディア・アップローダー］は基本的にSVG画像には対応していません。

管理画面の「メディアを追加」から無理矢理ファイルをアップロードしようとしても「このファイルタイプはセキュリティの観点から許可されていません。」というエラーメッセージが表示されて弾かれてしまします。

Retinaディスプレイへの対応と共に SVG もかなり普及して一般的になりつつある今、WordPressでも手軽に SVG を扱えるようにしたいものです。

そこで、いつものように［functions.php］に追加のコードを記入して「.svg」拡張子の画像をメディアアップローダーで追加できるように設定する方法を紹介します。

SVG ファイルのアップロードを許可する設定

使用中のテーマファイルの［functions.php］に以下のコードを記入します。

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

設定はこれだけ。
このコードを記述しておけば他の画像「JPG」「GIF」「PNG」などと同じように「SVG」も扱えるようになります。

SVGファイルのサムネイルを表示するには？

さて。めでたくSVG画像のアップロードには成功したワケですが、残念なことに［メディア・ライブラリ］での画像のサムネイル表示は不可能なようです。

またサーバー側でもMIMEタイプの追加設定が必要になるケースがあります。

［.htaccess］が利用できる場合は以下のコードを記述しておきましょう。

AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz

上記のコード、1行目は、次の2行のコードを短縮したものです。

AddType image/svg+xml .svg
AddType image/svg+xml .svgz

巷のブログではこちらのコードで紹介されているケースが多いですね。
プログラムのコードはなるべく短いほうがいいので、ここでは1行にまとめてしまいましょう。

また2行目のAddEncoding gzip .svgzの部分は拡張子が「.svgz」になる圧縮されたSVGに対応するためのものです。こちらも忘れずに、合わせて記述しておきましょう。

SVG画像については下記リンク先の記事にて詳しく紹介しています。
合わせてご覧ください。

【.htaccess】SVGまたはSVGZ画像が表示されない時に確認すべき設定。