【WordPress】SVGファイルをアップロードできるようにする
SVGファイルとは
SVGファイルは画像ファイルの一種です。画像ファイルといえばjpegとかpngとかが割と一般的です。
SVGファイルはjpegやpng等とはPC上での画像表現が異なり、ベクター画像と呼ばれるものです。ちなみに、jpegやpngはビットマップ画像と呼ばれます。
ビットマップ画像とは
ビットマップ画像は画像表現として、画像を格子状に分けたピクセルという単位で扱い、各ピクセルに色・輝度・透過度等を与えています。なので、ビットマップ画像を拡大していくと四角く角ばったように見えます。
なので、ビットマップ画像をより綺麗に鮮明にするためにはピクセルの粒度を増やしいく必要があります。しかし、ピクセルを増やしていくと容量が莫大になっていくという問題もあります。（解像度が高すぎると写真1枚で１GBを超えてしまったりします。）
ベクター画像とは
ベクター画像は画像表現方法がビットマップ画像と大きく異なり、色や曲線を計算式で表現しています。
なので、ベクター画像は拡大縮小した際に、再度計算されるので拡大しても滑らかな画像となります。その反面でベクター画像は色を多くと計算量が多くなってしまうという欠点があるため、写真などを扱うのは難しいです。なので、ベクター画像は色が単調なロゴなどのファイルに適しています。
SVGファイルはWordPressでは扱えない？
実はWordPressの標準仕様ではSVGファイルはアップロードできません。
これには理由があって、SVGファイルとはすなわち計算する関数の集合体です。そのため、この関数の中にハッキングプログラムを仕込む等ということが可能になるのです。
これを防止するためにWordPressではSVGファイルをアップロードできないようにしているそうです。
SVGファイル使えるようにする
1. SVGファイルをアップロードできるようにする
WordPressはPHPで書かれているものなので、PHPファイルの一部を修正することでSVGファイルをアップロードできるようにできます。
WordPressに導入しているテーマのfunction.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');
2. SVGファイルを表示できるようにする
SVGファイルを表示できるようにするためには、WordPressではなくWEBサーバの設定に手を入れる必要があります。
.htaccessに以下のコードを追加します。（.htaccessじゃない方が良いかもしれないです…）
AddType image/svg+xml .svg AddType image/svg+xml .svgz AddEncoding gzip .svgz
以上になります。
最後に
上の画像がSVGファイルになります。ちゃんと表示できました！！
ただし、ひとつ問題がありましてアップロードした際サイズが指定されていないため、1px × 1pxとなっていました。
サイズを指定してあげないといけませんね…