ワードプレス

SVGを作成してサポートされていないWordPressで使用する方法

Hovys
SVGを作成してサポートされていないWordPressで使用する方法
サイトリニューアルを依頼されて、必ず行う作業がロゴマークなどを PNG や JPEG から SVG に差し替えること。

WordPress では SVG はサポートされていないのでプラグインを使うという方法もあるけど、今回は、プラグインを使わないで SVG を WordPress で使うための手順を、以下、覚え書き。

SVGとは

SVG とは Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、Web サイトにロゴやアイコンを表示するために使用される XML ベースのベクトル形式の画像フォーマットの一種。

JPEG や PNG のようなラスタ形式の画像（ビットマップデータ）ではないので、一般的にファイルサイズが小さく、さらに拡大・縮小しても画質が損なわれないという特徴がある。

SVGデータ

SVG は、一般的に PNG や JPG よりもファイルサイズが小さいので、SVG を使用した場合ページサイズ全体が縮小され、サイトのスピードを上げることができ、Google に検索インデックスもされる。

※インライン SVG、または単なるコードで構成された SVG は、通常、インデックスされないので注意。

SVGがサポートされているブラウザ

SVG は、2001 年 9 月に W3C に勧告された技術にも関わらず、以前はサポートしているブラウザが少なかった。

しかし、RETINA ディスプレイのような高解像度画面が普及してきたため、近年はサポートが広範囲になり、すべてのモダンブラウザで SVG はサポートされている。

サポートブラウザ一覧

  • Internet Explorer 9 , 10 , 11 + および Edge
  • Firefox 3 +
  • Chrome 4 +
  • Safari 3.2 以降
  • Opera 10 +
  • iOS Safari 3.2 以降
  • pera Mini（すべて）
  • Androidブラウザ 4.4 以降

※ IE8 はサポートしていないので注意。

WordPressでSVGがサポートされていない理由

すべてのモダンブラウザにサポートされているのにもかかわらず、WordPress では SVG はサポートされていない。

なぜなら、SVG は、ラスタ形式の画像（ png 、jpg 、gif など）と違い、ベクトル形式の XML ファイルなので、さまざまな脆弱性が存在し、XML 外部エンティティ攻撃や XSS 攻撃などを受ける可能性や、外部攻撃以外にも、SVG は JavaScript を埋め込むことができ、SVG 表示時に悪質な JavaScript の実行に使用することもできるので、WordPress の主要開発者たちの間で議論は続いているが、現在も、セキュリティの観点から、WordPress は、SVG をサポートしていない。

WordPressでSVGを使用するために設定編集

いずれデフォルトになると思うけど今のところデフォルトで SVG を使うことができないので、WordPress の設定を編集して SVG を使えるようにする。

WordPress のメディア・アップローダーは、アップロードするファイル形式が制限されているので、基本的に SVG 画像のアップロードは許可されていない。

なので、ファイルをアップロードしようとすると下記のようなエラーメッセージが表示されてアップロードできない。

SVGデータ

だけど、WordPress のメディアライブラリへアップロードすることができるファイル形式の設定は編集できるので、functions.php にコードを追記して、SVG フォーマットをアップロードできるファイル型式として設定する。

functions.phpにコードを追記

子テーマの functions.php ファイルに下記のコードを追記する。

add_filter('upload_mimes', 'set_mime_types');
function set_mime_types($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}

追記することによって、SVG の拡張子（ image / svg + xml ）を、アップロード許可済みのファイル形式の配列に追加することができ、SVG をアップロードできるようになる。

.htaccessにコードを追記

さらに、サーバー環境によってはブラウザー側で「. svg 」「. svgz 」を画像として認識してくれず表示されない場合があるので、.htaccess に下記のコードを追記してサーバー側の設定を変更する。

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

※ 2 行目の AddEncoding gzip .svgz の部分は拡張子が「.svgz 」になる圧縮された SVG に対応するためのものなので記述を忘れないように注意。

これで、メディアライブラリに SVG を直接ドラッグ＆ドロップでき、さらに SVG が標準ファイルとして表示されるようになる。

SVGデータの作り方

SVG データは Illustrator や Photoshop から書き出すことができる。

今回は、Illustrator で作成。

1 . まず、Illustrator で SVG にするデータを作成する。

SVGデータ

2 . データが完成したらメニューバーの「ファイル」から「別名で保存」をクリック。

SVGデータ

3 . ファイルの種類の「 SVG（ SVG ）」を選択して保存をクリック。

SVGデータ

4 . SVG オプションの各項目を選択して「 OK 」をクリックして完了。

SVGデータ

SVG データ書き出し時の設定項目

  • SVG プロファイルは「 SVG 1 . 1 」を選択。
  • オプションの画像の場所は「埋め込み」を選択して、「 Illustrator の編集機能を保持」のチェックは外す。

『 SVG 形式で書き出す時のオプション設定の詳しい方法（ Illustrator CC ）』は ⇒ こちら

WordPress が SVG をサポートすることはすぐにはなさそうなので、しばらくはこの方法で。

関連記事