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を使用すると、ページ全体のサイズが小さくなるため、ウェブサイトを高速化できます。
同じ画像は、異なるフォーマットでどのように表現されるか書かれた良いブログ記事があるので、紹介したいと思います。
http://genkihagata.com/blog/svg-vs-flat-images.html
上記からわかるように、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です。
参照：
