【SVG】WordPressでSVG形式を使う方法

WordPressでSVG形式は初期設定ではサポートされていません。しかしPNGやJPEGにない特性を活かしてはっきり鮮明にロゴなどを配置したい方も多いでしょう。SVGの作り方からメディアライブラリへのアップロードの許可、表示の仕方を書いていきます。

文字のアウトライン化は「書式」-「文字のアウトライン化」を選んでクリック。

「複製を保存」または「別名で保存」をクリック。

形式をSVG形式にして保存します。

次に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');

次に表示させるために.htaccessに以下を追加します。

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

あとは普通にPNGやJPEGのようにアップロードも表示もできます。