SVGは、ウェブサイトにロゴやアイコン、グラフを表示するため使用されるXMLベースのベクター画像だ。開発者やデザイナーの間で人気の理由は、一般的にファイルサイズが小さく、画像を拡大しても劣化しないことだろう。
しかし、セキュリティ上の懸念により、WordPressはデフォルトでSVGファイルをアップロードできない。セキュリティ上懸念があるだけで、正しく使用すれば問題ないのに…
本記事では、WordPressでSVG画像を安全に有効化する方法や、ブラウザのサポートレベル、ベクター画像を使用する場合の注意事項についても説明している。
SVGとは何か
SVG（Scalable Vector Graphics）は、双方向性とアニメーションをサポートする2次元グラフィックス用のXMLベースのベクター画像形式だとウィキペディアは説明している。コードで表現されるため、テキストエディタ（VS CodeやAtomなど）で操作することも可能。
SVGは、1999年にWorld Wide Web Consortium（W3C）によって開発され始めたオープンスタンダードだ。
執筆現在、SVGは世界中のウェブサイトの19.4%使用されており、以下で示されるように採用率は伸びている。Google、Reddit、Dropbox、ESPNなどの人気サイトもSVGを使用している。
ブラウザのSVG対応状況
SVGは現在、すべての主要なブラウザでサポートされている。IE8はサポートされていないが、IE8の市場シェアは約0.3％強であり気にする必要はないだろう。
SVGの利点
SVGはベクター形式なので、非常にスケーラブルだ。ベクター素材はグラフィックデザイナーやウェブデザイナー、データをグラフで表現したい人に最適である。
通常、Photoshop、Sketch、PaintなどのツールでPNGやJPGを編集しようとすると、思うような表現はできないが、SVGを使用すると無限に拡大できる。これが、イラストなどで使用するのに最適な画像フォーマットである理由だ。
GoogleはSVGのインデックスを作成しGoogle画像検索に表示されるので、SEOも問題ない。
SVGは、基本的にPNGやJPGよりもファイルサイズが小さくなっている。SVGを使用すると、ページ全体のサイズが小さくなるため、ウェブサイトを高速化できる。
同じ画像は、異なるフォーマットでどのように表現されるか書かれた良いブログ記事があるので、紹介したい。
上記からわかるように、SVGはJPGと比較した場合、ファイルサイズは基本的に減少している。ただし、全てのSVG画像が必ず小さいわけではないことは、頭に入れておく必要がある。
多くのウェブサイトは、ロゴやアイコンなどの画像にSVGを使用しているため、ファイルサイズが大幅に減少する。しかし、ブログの「featured images」などの大きな画像には、PNGやJPGを使用する必要がある。
FacebookやTwitterなどのソーシャルメディアは、シェアされたときのリンクでSVGをサポートしていない。したがって、「featured images」にSVGを使用した場合OG画像は表示されないので、注意が必要だ（Yoast SEOなどで個別に設定することはできる）。
WordPressでSVGを安全にサポートする方法
何も対応をしていない状態でWordPressにSVG画像をアップロードしてみよう。
ドラッグ&ドロップまたはファイル選択でアップロードしてみても、『セキュリティ上の理由によりこのファイル形式は許可されていません』という表示が出てしまう。
では、「プラグインを使用する方法」と「プラグインを使用しない方法」の2タイプを解説していく。
これにより、
- 手軽にSVGを有効化したい方
- プラグインを使用したくない方
という、両方のニーズを満たすことができると考えた。
プラグインなし
以下のPHPコードを、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画像の先頭に、エンコードを指定してあげよう。
<?xml version="1.0" encoding="utf-8"?>
プラグインあり
Daryll氏はWP SVG（Safe SVG）呼ばれるプラグインを開発した。これは、 SVG画像をメディアライブラリへアップロードする際に、SVG-Sanitizerライブラリを利用する（サニタイズのため）。このプラグインを使用すると、メディアライブラリの通常の画像のようにSVGを表示することもできる。
Safe SVGは無料でダウンロードし、ダッシュボードから数回クリックするだけで利用できる。
アップロード可能になると…
では、<?xml version="1.0" encoding="utf-8"?>を追加した状態のSVG画像をメディアライブラリへアップロードしてみよう。
以下のように表示されている！
このグラフはSVG画像なので、どれだけ拡大してもキレイに表示され、粗くなることはない。
アップロードしたSVG画像↓
試しに、限界まで拡大してみてほしい。めっちゃくちゃキレイだ！
同様のグラフが、PNG形式で以下の記事にて掲載されている。ぜひ比較してみて欲しい。
まとめ
SVGは、ウェブサイトの外観を向上させる優れた方法である。SVG、PNG、JPGを目的に沿って使用し、最高のパフォーマンスを実現させよう。SVGはロゴやグラフに使用するのに最適であり、大きな画像には向いていない。
適材適所、向き不向きを理解し使うことが重要である。
オススメのレンタルサーバーは、Mixhostです。
参照：
