WordPressでSVGを追加する方法(2つのシンプルなソリューションを使用)

WordPressサイトにSVGファイルを追加しますか?デフォルトでは、WordPressでは一般的な画像、音声、動画のファイル形式をすべてアップロードできますが、SVGはそれらに含まれていません。この記事では、WordPressにSVGを簡単に追加する方法を紹介します.

WordPressでSVGファイルを簡単に追加

SVGとは?

SVGまたはScalable Vector Graphicsは、XMLマークアップ言語を使用してベクターグラフィックを定義するファイル形式です。 SVGの主な利点は、品質を落としたり、ピクセル化したりせずに画像を拡大できることです。.

SVGの仕組み?

Scalable Vector Graphics(SVG)は、XMLを使用して2次元の図面を表示するテクノロジーです。それらは、PNG、GIF、JPEGなどの一般的に使用される画像形式とは異なります.

png / jpeg画像ファイルを取得してズームインすると、画像がぼやけてピクセル化されることがわかります.

ベクターグラフィックはピクセルを使用しません。代わりに、表示しているグラフィックを定義する2次元マップを使用します。ズームインしても、画像はピクセル化しません.

これにより、品質を損なうことなくベクターグラフィックを拡大できます。最も重要なのは、SVG画像のファイルサイズがJPEGまたはPNGよりもはるかに小さいことです。.

ベクターグラフィックスは、アイコン、アイコンフォント、ウェブサイトのロゴ、ブランドイメージによく使用されます。会社のロゴ、アイコン、またはその他のグラフィックスのために、WordPressにSVGファイルを追加することができます。.

かっこいいとはいえ、SVGファイルはまだ少し安全ではありません。そのため、WordPressはデフォルトでSVGファイルのアップロードをサポートしていません。.

WordPressでSVG画像をアップロードすると、次のエラーメッセージが表示されます。

このファイルタイプはセキュリティ上の理由から許可されていません.

WordPressのSVGセキュリティエラー

WordPressのSVGに関するセキュリティの問題

SVGファイルには、HTMLに類似したXMLマークアップ言語のコードが含まれています。ブラウザまたはSVG編集ソフトウェアがXMLマークアップ言語を解析して、画面に出力を表示します.

ただし、これによりWebサイトがXMLの脆弱性にさらされる可能性があります。ユーザーデータへの不正アクセス、ブルートフォース攻撃、クロスサイトスクリプティング攻撃のトリガーに使用できます。.

この記事で共有する方法では、SVGファイルをサニタイズしてセキュリティを向上させます。ただし、これらのプラグインは、悪意のあるコードのアップロードまたは挿入を完全に防ぐことはできません。.

最善の解決策は、信頼できるソースによって作成されたSVGファイルのみを使用し、SVGアップロードを信頼できるユーザーのみに制限することです。.

セキュリティの詳細については、初心者向けの完全なWordPressセキュリティガイドをご覧ください。.

そうは言っても、WordPressでSVGファイルを簡単かつ安全に使用する方法を見てみましょう.

方法1. SVGサポートを使用してWordPressにSVGファイルをアップロードする

この方法は、WordPressでのSVGファイルの追加を完全にサポートします。 WordPressの投稿やページにインラインSVGを表示することもできます.

まず、SVGサポートプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

アクティベーション時に、あなたは訪問する必要があります 設定»SVGサポート プラグイン設定を構成するページ.

SVGサポート設定

設定ページで、[管理者に制限しますか?]オプションの横のチェックボックスをオンにする必要があります。これにより、サイト管理者のみがWordPressでSVGファイルをアップロードできます.

次のオプションは、詳細モードをオンにすることです。 CSSアニメーションやインラインSVGレンダリングなどの高度な機能を使用する場合にのみ、このオプションをオンにする必要があります.

変更を保存するボタンをクリックして設定を保存することを忘れないでください.

これで、新しい投稿を作成したり、既存の投稿を編集したりできます。投稿エディタで、他の画像ファイルをアップロードするのと同じようにSVGファイルをアップロードします。エディターに画像ブロックを追加してから、SVGファイルをアップロードするだけです.

WordPressにSVGファイルをアップロードして埋め込むことができるようになります.

WordPress投稿に埋め込まれたSVGファイル

方法2.安全なSVGを使用してWordPressにSVGファイルをアップロードする

この方法でもプラグインを使用し、WordPressにアップロードされたSVGファイルのサニタイズを実行できます.

最初に行う必要があるのは、Safe SVGプラグインをインストールしてアクティブにすることです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

プラグインはそのまま使用でき、構成する設定はありません。先に進んでSVGファイルのアップロードを開始できます.

欠点は、このプラグインにより、WordPressサイトに投稿を書くことができるすべてのユーザーがSVGをアップロードできることです。.

ファイルをアップロードできるユーザーを制御するには、プラグインのプレミアムバージョンを購入する必要があります.

この記事が、WordPressにSVGを安全に追加する方法を学習するのに役立つことを願っています。 WordPressの最も一般的な画像の問題とその修正方法に関する記事もご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me