WordPressでのSVGファイルの使用

公開: 2020-11-18

Webサイトを定期的に使用している場合は、SVGファイルに出くわした可能性があり、WordPressWebサイトでSVGファイルを使用しようとした可能性があります。通常、WordPressでSVGファイルを使用するのは難しい場合があるため、「試してみました」と言います。この記事では、SVGファイルとは何か、なぜそれらを使用するのか、そして今日WordPressWebサイトにそれらを実装し始める方法を見ていきます。

始めましょう！

SVGファイルとは何ですか？

SVGは「ScalableVectorGraphics」の略です。これらのタイプの画像ファイルは、ピクセルに基づくJPEG、PNG、GIFなどのより一般的な画像形式とは異なります。一方、SVG画像はベクトルを使用して数学的に描画されるため、「ベクトルグラフィックス」と呼ばれる画像のグループに属します。

あなたはおそらく、粒子が粗いまたはピクセル化されたように見える画像を持っているウェブサイトを見たことがあるでしょう。または、（たとえば）JPEGファイルを拡大しようとして、拡大するほど画像が粗くなるように見えることに気付いたかもしれません。これを修正する唯一の方法は、a）ズームアウトするか、b）使用する画像の高解像度バージョンを見つけることであるため、これは非常にイライラする可能性があります。

他のベクターベースのグラフィックスと共通のSVGファイルは、画像の各部分が画像の外観を定義する2次元マップを使用して作成されるため、この「ピクセル化」の問題に悩まされることはありません。このため、SVGファイルを無期限にスケーリングでき、常に鮮明でシャープに見えます。

これにより、画像の表示に使用される解像度画面は関係なく、常に見栄えがよいため、Webサイトに最適です。

解像度を損なうことなくスケーリングできるこの機能は、画像用のSVGファイルがWebサイトでの使用にますます普及している理由の1つです。多くの場合、WebサイトはロゴをSVGファイルとしてアップロードし、Webサイト上の他の多くのグラフィックもSVG形式で追加されています。また、SVGファイルはXML言語を使用してコード化されているため、技術的にはテキストエディターを使用して編集でき、検索エンジンで簡単にインデックスを作成できます。

好きなものはたくさんありますが、欠点はありますか？

SVGファイルとWordPress

SVGファイルには1つの大きな弱点があります…セキュリティです。 SVGファイルは設計上実際には安全ではないため、WordPressでは「安全ではない」ものとして扱われます。では、これはなぜですか？

SVGファイルは、実際には画像形式ではなく、ドキュメント形式で保存されます。このため、JavaScriptをファイルに埋め込むことは技術的に可能です。このJavaScriptは、エンドユーザーのブラウザで実行できます。 JavaScriptが本質的に悪意のあるものである場合、明らかに悪いニュースです。

さらにSVGの脆弱性もあります。ベクターグラフィックを表示するためにブラウザがXMLマークアップを解析する必要があるという事実により、不正なユーザー日付へのアクセスの取得、ブルートフォース攻撃のトリガー、クロススクリプト攻撃などの悪意のある使用に対してブラウザが脆弱になります。

より平凡な観点から、WordPressのすべてのユーザーがメディアライブラリにアクセスできるという事実は、SVGファイルによってもたらされる可能性のある危険に気付いていない誰かが安全でないSVGファイルをWebサイトにアップロードするリスクを高めます。

これらの問題が原因で、WordPressはデフォルトでSVGファイルのアップロードを許可しません。サーバーがSVGファイルを受け入れるように構成されていない限り、SVGファイルをWordPressメディアライブラリにアップロードしようとした後、以下のメッセージが表示される場合があります。

WordPressでSVGファイルを使用する方法

SVGファイルとWordPressは完全に互換性があることに注意することが重要です。デフォルトでSVGファイルをアップロードできない唯一の本当の理由は、これらのタイプのファイルを取り巻くセキュリティ上の懸念のためです。

そのため、SVGファイルを使用することのセキュリティへの影響を認識し、WordPress Webサイトに悪意のあるコードがアップロードされていないことを確認するための適切なチェックを行う限り、WordPressWebサイトでSVGファイルを自由に使用できます。

SVGファイルのサニタイズ

説明したように、WebサイトにアップロードされるSVGファイルに悪意のあるコードが含まれていないことを確認することが重要です。これを行うには、SVGファイルを最初に「サニタイズ」する必要があります。これを行う最も簡単な方法は、WordPress WebサイトでSVGプラグインを使用することです（詳細は次を参照）が、手動でこれを行う場合は、WordPress開発者であるDarryllDoyleが提供するSVGSantizerTestなどのオンラインサニタイザーを使用できます。。

SVGファイルのコンテンツをオンラインのSantitizerにアップロードすると、コードが実行され、「サニタイズされた」バージョンが作成されます。

コードの準備ができたら、コードスニペットを介してWordPressに直接挿入できます。

実際には、プラグインを使用してSVGファイルを処理する方が簡単であることがわかります。特に、多くのファイルを使用する場合はそうです。幸いなことに、利用可能な優れたオプションがいくつかあります。

安全なSVG

Safe SVGは、Darryll Doyle（上記にリンクされたSVG Sanitizer Webサイトも作成した）によって開発されたプラグインです。「SVGアップロードを許可する最良の方法」と説明されているこのプラグインは、a）SVGファイルを許可するようにWordPressを構成し、b）アップロード時にSVGファイルをサニタイズして安全に使用できるようにすることで、2つのレベルの機能を提供します。

プラグインをインストールしてアクティブ化すると、WordPressWebサイトで使用するSVGファイルのアップロードをすぐに開始できます。前述のように、これらのファイルはメディアライブラリに追加される前にサニタイズされるため、不注意でWebサイトがマルウェアに感染するリスクを冒さないでください。

プラグインの有料版もあり、画像の最適化とアップロード時のユーザー制限に関連するいくつかの追加オプションを提供します。

SVGサポート

Safe SVGと同様に、SVGサポートを使用すると、SVGファイルをメディアライブラリに簡単かつ安全にアップロードして、他の画像と同じように使用できます。

インストール/アクティブ化して管理メニューの[設定]->[SVGサポート]に移動すると、管理者のみにアップロードを制限し、詳細モードと一部を開くことでSVGファイルのスタイルを強化できる設定が表示されます。 SVGファイルをアニメーション化および最適化するためのソースツール。

コードスニペット

プラグインを使用せずにSVGサポートを有効にする場合は、アクティブなテーマのfunctions.phpファイルを編集することで有効にできます。お気に入りのテキストエディタを使用してファイルを開き、次のコードを追加します。

 //add SVG to allowed file uploads 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ファイルをメディアライブラリにアップロードできるようになります。 SVGファイルを取り巻くセキュリティの問題を覚えておいて、最初にファイルをサニタイズするようにしてください。

SVGとCSS

SVGファイルをWebサイトのロゴとして使用する場合、<img>タグとして直接適用されます。

CSSを使用してロゴファイルのサイズを変更すると、画像を必要なだけ大きく拡大できることがわかります。もちろん、以下のデモではサイズを誇張しています（これほど大きなログが必要になる可能性は低いです！）が、あなたはその考えを理解しています。

SVGファイルを使用できるのはロゴだけではありません。たとえば、SVGファイルをWebサイトのフッターの背景画像として使用できます。これを実現するために使用できるいくつかのデモコードを以下に示します（もちろん、ドメインとパスをイメージに変更することを忘れないでください）。

 footer { background: url(http://YOURDOMAIN.com/wp-content/uploads/PATH-TO-YOUR-SVG/FILENAME.svg) no-repeat right; background-size: 240px; }

SVGファイルのエキサイティングな点は、画像の大きさや小ささに関係なく、常に鮮明でシャープに見えることです。

SVGファイルのブラウザサポートは最近かなり普遍的です。注目すべき例外の1つはInternetExplorer8ですが、現在世界中のユーザーの0.3％しかこれを実行していないため、大きな問題にはならない可能性があります。

WebサイトでCSSを介してSVGファイルを使用するための正しいコードを生成するのに苦労している場合は、SVG用のこの無料のURLエンコーダーを確認してください。これは優れたツールであり、必要な作業を最小限に抑えて、SVGコードをCSS対応に簡単に変換できます。

結論

SVGは、Webサイトのグラフィックが鮮明で、表示されている画面に関係なく見栄えがするようにする場合に最適なソリューションです。 SVGプラグインを利用する場合、WordPressインストールでそれらを有効にするのは簡単で、レスポンシブWebサイトの設計に関しては、すべての画面サイズで1つの画像を使用できるため、処理を大幅に高速化できます。

SVGファイルの唯一の欠点は、実際にはそれらがもたらすセキュリティリスクです。とは言うものの、これらをサニタイズするプラグインを使用すると、リスクが大幅に軽減され、実際にそれらの使用を延期するべきではありません。