WordPressのメディアライブラリにSVG画像をアップロードできるようにする

ロゴや図など、ベクター画像でできているものは、SVG形式で書き出せば拡大しても劣化しませんし、容量も軽くできます。

※かなりディテールが複雑なものは逆に重くなる場合もあります。

レスポンシブで幅を自由に指定すれば、劣化を気にせず使えるので積極的に使っていきたい形式です。

各ブラウザ対応

2019年4月時点での対応ですが、ほぼ全てのモダンブラウザで対応しています。IE11以前は、マイクロソフトで非サポートとなった事なのでSVGをどしどし使える環境は整いました。

まずサーバーでSVGの対応自体がされていないものをあります。その場合はMIMEタイプの追加設定をしなければいけません。

.htaccessなどで以下のコードを記述します。

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

これで、お使いのWEBサーバーでSVGを表示することが可能になります。

 次のWordPressのメディアライブラリで扱うファイルタイプを追加する必要があります。

functions.phpに

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_action('upload_mimes', 'add_file_types_to_uploads');

を追加します。

これでメディアライブラリーにSVGがドラックドロップで追加でき、画像として利用できます。