SVGファイルは開発者やデザイナーの間で支持されており、スケーラビリティ、ファイルサイズ、Retinaディスプレイでピクセル化されないなどのメリットがあります。しかしWordPressでは、セキュリティ上の懸念から、SVGファイル形式のアップロードはサポートされていません。
今回はSVGを掘り下げ、その特長やWordPressでSVGサポートを安全に有効化する方法を見ていきます。また、ブラウザのサポート状況や、ベクター画像形式に切り替える際の注意点についてもご紹介します。
SVGファイルとは
SVG（Scalable Vector Graphics）は、XMLベースのベクター画像で、ウェブサイトやブランドがロゴやアイコンをウェブサイトに表示する際によく使われます。ウィキペディアでは、以下のように定義されています。
SVG (scalable vector graphics) はXMLベースのベクトル画像フォーマットであり、インタラクティブ性とアニメーションをサポートした二次元グラフィックスのためのものである。SVG仕様は1999年からWorld Wide Web Consortium (W3C)によって開発されているオープンスタンダードである
SVGファイルは、コードやテキストエディターで操作することも可能です。SVGは現在、全ウェブサイトの57.9%で使用されており、その採用率は現在も伸び続けています。Google、Reddit、Dropbox、ESPNなどでもSVGが使用されています（Kinstaのウェブサイトでも）。
SVGファイルブラウザサポート
SVGファイルは現在、モバイルブラウザを含むすべての主要ブラウザでサポートされています。
SVGファイルを使うメリット
SVGファイルはベクター画像形式です。これは、ブラウザと写真編集ツールの両方で自動的にスケーラブルであることを意味します。グラフィックデザイナーとウェブデザイナーに有用で、通常はPhotoshop、Sketch、PaintなどのツールでPNGやJPGを編集しようとすると、ピクセル化せずに拡大することはできませんが、SVGはピクセルパーフェクト（見た目のpx値がずれないこと）のため、無限に拡大できます。
また、GoogleはSVGファイルをインデックスするため、SEOの観点からも安心です。ファイル自体にリンクされているSVGコンテンツはインデックスされ、Googleの画像検索に表示されます。Kinstaで使用しているSVGイラストで、高度な画像検索を行うと実際に確認できます。注）インラインSVG（コードだけで構成されたもの）は通常インデックスされない。
SVGは基本的にPNGやJPGよりもファイルサイズが小さいため、ページ全体のサイズを小さくすることができ、ひいてはWordPressサイトの高速化につながります。GenkiによるSVGとPNGとJPEGのサイズ比較、またKinstaでもJPGとJPEGの違いをご紹介しています。前者の記事で示されているテスト結果を見てみましょう。
JPG（最適化サイズ：81.4 KB）
PNG（最適化サイズ：85.1 KB）
SVG（最適化サイズ：6.1 KB）
このとおり、JPGと比較すると、SVGは92.51％ファイルサイズが小さくなることがわかります。PNGとの比較は、92.83%。これはかなりの違いです。ただし、注意点として、より高解像度の画像をテストしていくと、SVGは最終的にJPGやPNGよりもサイズが大きくなる傾向にあります。
したがって、ロゴやアイコンのような細部の少ない画像にSVGファイルを使用するのが得策です。ブログ記事のアイキャッチ画像のような大事な画像には、PNGやJPGを使いたいところですが、それでも最適化することは可能です。多くのサイトでは、ハイブリッドアプローチをとっており、理にかなっている場合は両方のファイル形式を併用しています。
また、FacebookやXのようなSNSでは、共有用のSVGはサポートされていません。そのため、アイキャッチ画像にSVGを使用する場合は、Yoast SEOの機能を利用して、OGPとメタタグにPNGまたはJPGをアップロードする必要があります。
SVGのセキュリティが重要な理由
SVGが、WordPressのコアに含まれていない理由は、セキュリティ上の懸念があるためです。WordPressコアのSVGに関するディスカッション（#24251）は、2013年から始まっています。SVGはXMLファイルであり、それ自体が通常の画像形式では懸念されない、XML外部エンティティ攻撃（XXE）、爆弾ネストエンティティ、XSS攻撃などの危険にさらされる可能性があります。
Mario Heiderich氏は、SVGファイルへのコンテンツインジェクションによるセキュリティリスクについて、洞察に満ちたプレゼンテーションを発表しています。JavaScriptをSVGに埋め込み、Skypeで同氏に電話を発信することができたという恐ろしい事例も挙げられています。WordPressのセキュリティプラグイン開発を行うSecuPressも、WordPressにSVGを追加する際の注意点、そして正しい方法で追加することの重要性について言及しています。
リポジトリ上の多くのSVGプラグインは、以下のようなコードで、WordPressのメディアライブラリへのSVGのアップロードを許可するMIMEタイプを単に有効化していますが、これは安全ではありません。したがって、目についた無料のSVGプラグインをダウンロードしたり、このコードをコピーペーストしたりして、SVGのサポートを追加しないようにしてください。
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');この解決策としては、SVGのサニタイズです。サニタイズとは、セキュリティ問題（コードインジェクションなど）やコードの衝突、エラーを避けるためにコードや入力をきれいにすることで、これには、データのエンコード、文字列のフィルタリングと検証などが含まれます。これには、Daryll Doyle氏のSVG-Sanitizerライブラリが有用です。以下、SVGサニタイザーのデモを見てみましょう。
また、サイトの誰がSVGをアップロードする権限を保持するかも重要です。例えば、複数の投稿者がいるサイトでは、他の誰かがどのようなSVGをアップロードし、サイトを危険にさらしてしまうかわかりません。SVGのアップロードを管理者やセキュリティ上の懸念をある程度理解しているユーザーに制限することが望ましいです。
WordPressのSVGサポートを安全に有効にする方法
先ほど挙げたDaryll Doyle氏は、WordPressのメディアライブラリにSVG画像をアップロードする際にSVG-Sanitizerを使用するようにするプラグイン、WP SVG（Safe SVGとも）を開発しています。このプラグインを使用すると、メディアライブラリで通常の画像のようにSVGを表示することができます。
WordPressのリポジトリから無料でダウンロード可能です。また、WordPress管理画面の「プラグイン」＞「新規追加」から検索してインストール、有効化することができます。
wpsvg.comで入手可能な有料版もあり、特定のユーザーに対してSVGファイルのアップロードを制限したり、SVGの最適化を行ったりなど、より高度な機能を利用できます。今回は、無料版を使用した方法をご紹介します。
代替プラグインとして、SVG Supportもあります。
なお、SVGファイルをアップロードする前に、SVGの挙動は通常の画像とは若干異なることに注意してください。写真編集ツールからSVGをエクスポートする場合は、テキストを曲線としてエクスポートする（またはアウトラインを作成する）ことをお勧めします。
プラグインは設定不要で、インストールするだけで、アップロード時にSVGをサニタイズすることができます。以下のテストサイトでは、ロゴをSVGファイルに置き換えています。
また、テーマに組み込まれている設定パネルやカスタマイズ機能を活用して、ロゴ画像をSVG形式に変更できました。以下では、.svgファイルが表示され、Retinaディスプレイでも美しく見えるようになりました。
もう1つ注意点として、IE9-11のPC版とモバイル版では、SVGファイルが適切に拡大縮小されません。これはheightとwidthを追加することで解決可能です。テーマによって異なる可能性がありますが、上記のテストサイトでは、単にheader.phpファイルを修正し、独自の寸法を追加します。テーマによっては、CSSを使ってスケーリングを変更するものもありますが、パフォーマンス上望ましくありません。
これで、WordPressでのSVGサポートが有効になりました。なお、このプラグインとサポート手順は、WordPressコアで推奨、サポートされているわけではありません。しかし、すでにMIMEタイプだけでSVGをアップロードしている場合は、この手順でアップロードするようにしてみてください。
SVGを使用したことがない場合は、サーバーで image/svg+xmlファイルタイプのGZIPを有効にしてください。これによりSVGが圧縮され、より高速に読み込まれるようになります。システム管理者は、標準的なファイルタイプしか有効にしない場合があります。注）Kinstaサーバーでは、SVGに対するGZIPはすでに有効になっています。
まとめ
SVGはサイトの外観を向上させるのに役立ちます。SVG、PNG、JPGをうまく併用して、サイトパフォーマンスを最適化してみてください。SVGは特にロゴにうってつけで、どのような画面でもピクセルパーフェクトに見せることができます。
Brianの最大の情熱の一つは10年以上使用してきたWordPressです。複数のプレミアムプラグインさえ開発しています。Brianの趣味はブログや映画やハイキングなどです。TwitterでBrianとつながりましょう。
コメントを残す