WordPressでSVG画像をアップロード可能にする方法。プラグインあり&なし両方解説

ウェブ
この記事は約6分で読めます。

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を使用すると、ページ全体のサイズが小さくなるため、ウェブサイトを高速化できます。

同じ画像は、異なるフォーマットでどのように表現されるか書かれた良いブログ記事があるので、紹介したいと思います。

Genki Hagata | Art | Design | | SVG vs. PNG vs. JPEG
Interdisciplinary Digital Art by Genki Hagata. Interactive Digital Media Art Ranging from programming, digital photography and everything inbetween.

上記からわかるように、SVGはJPGと比較した場合、ファイルサイズは基本的に減少しています。

ただし、全てのSVG画像が必ず小さいわけではないことは、頭に入れておく必要があります。

多くのウェブサイトは、ロゴやアイコンなどの画像にSVGを使用しているため、ファイルサイズが大幅に減少します。

しかし、ブログの「featured images」などの大きな画像には、PNGやJPGを使用する必要があります。

FacebookやTwitterなどのソーシャルメディアは、シェアされたときのリンクでSVGをサポートしていません。

したがって、「featured images」にSVGを使用した場合、OG画像は表示されないので、注意が必要です(Yoast SEOなどで個別に設定することはできます)。

OG画像
OG画像とは、シェアされた際に表示される画像のこと。この例ではビヨンセの画像がOGとして使用されている。

WordPressでSVGを安全にサポートする方法

何も対応をしていない状態でWordPressにSVG画像をアップロードしてみます。

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"?>
Wordpress SVG

プラグインあり

Daryll氏はWP SVG(Safe SVG)呼ばれるプラグインを開発しました。

これは、 SVG画像をメディアライブラリへアップロードする際に、SVG-Sanitizerライブラリを利用します(サニタイズのため)。

このプラグインを使用すると、メディアライブラリの通常の画像のようにSVGを表示することもできます。

Safe SVGは無料でダウンロードし、ダッシュボードから数回クリックするだけで利用できます。

アップロード可能になると…

では、<?xml version="1.0" encoding="utf-8"?>を追加した状態のSVG画像をメディアライブラリへアップロードしてみます。

Wordpress SVG

以下のように表示されているのが確認できます!

このグラフはSVG画像なので、どれだけ拡大してもキレイに表示され、粗くなることはありません。

Wordpress SVG

アップロードしたSVG画像↓

試しに、限界まで拡大してみてほしいです。

めっちゃくちゃキレイ!

同様のグラフが、PNG形式で以下の記事にて掲載されています。

ぜひ比較してみて欲しいです。

まとめ

SVGは、ウェブサイトの外観を向上させる優れた方法です。

SVG、PNG、JPGを目的に沿って使用し、最高のパフォーマンスを実現させましょう。

SVGはロゴやグラフに使用するのに最適で、大きな画像には向いていません。

適材適所、向き不向きを理解し使うことが重要です。

オススメのレンタルサーバーは、Mixhostです。

参照:

ウェブ
この続きはcodocで購読
Keisuke Kuribara

株式会社Propagation代表取締役。興味対象は、ビットコイン、大麻、ウェブ、金融、生物、心理など。金融から健康、テック、音楽など様々な事について執筆しており、このブログは月間20万PV程度となっております。自身のアウトプットや知的好奇心を満たすことが主な目的です。お仕事の依頼や相談などお気軽にお問い合わせください。Google アナリティクス個人認定資格(GAIQ)を保有。

Keisuke Kuribaraをフォローする

クリブログ

コメント