WordPressサイトにSVGファイルを追加すると、画像がシャープでクリアに見えるようになります。
ただし、WordPressでは画像、音声、動画など多くの種類のファイルをアップロードできますが、標準ではSVGファイルはサポートされていません。
これは、SVGファイルがセキュリティリスクをもたらす可能性があるためです。しかし、心配しないでください。SVGを使用するための安全な方法があります。
この記事では、SVG画像ファイルをWordPressに簡単かつ安全に追加する方法を紹介します。
SVGとは何ですか？
SVG、またはScalable Vector Graphicsは、XMLマークアップ言語を使用してベクトルグラフィックスを定義するファイル形式です。その主な利点は、品質を損なうことなく、またはピクセル化することなく画像を拡大できることです。
SVGはどのように機能しますか？
Scalable Vector Graphics（SVG）は、XMLを使用して2次元の描画を表示するテクノロジーです。PNG、GIF、JPGなどの一般的に使用される画像形式とは異なります。
PNGまたはJPGの画像ファイルを拡大すると、画像がぼやけてピクセル化することがわかります。
ベクターグラフィックスはピクセルを使用しません。
代わりに、表示しているグラフィックを座標として定義する2次元マップを使用します。拡大しても画像がピクセル化しないのは、単純にできないからです。
これにより、品質を損なうことなくベクトルグラフィックスを拡大できます。最も重要なのは、SVG画像はPNGまたはJPGファイルよりもファイルサイズがはるかに小さくなる可能性があり、画像フォーマットに最適です。
ベクトルグラフィックスは、アイコン、アイコンフォント、ウェブサイトのロゴ、ブランディング画像によく使用されます。会社のロゴ、アイコン、その他のグラフィックスのためにWordPressにSVGファイルを追加したい場合があります。
ただし、SVGファイルは少し安全でない場合があります。そのため、WordPressではデフォルトでSVGファイルのアップロードがサポートされていません。
WordPressでSVG画像をアップロードすると、「セキュリティ上の理由により、このファイルタイプは許可されていません。」というエラーメッセージが表示されます。
WordPressにおけるSVGに関するセキュリティ問題
SVGファイルには、HTMLに似たXMLマークアップ言語のコードが含まれています。ブラウザまたはSVG編集ソフトウェアがXMLマークアップ言語を解析して、画面に出力を表示します。
ただし、これにより、ウェブサイトがXMLの脆弱性の影響を受ける可能性があります。ユーザーデータへの不正アクセスを取得したり、ブルートフォース攻撃やクロスサイトスクリプティング攻撃をトリガーしたりするために使用される可能性があります。
この記事で共有するメソッドは、SVGファイルをサニタイズしてセキュリティを向上させようとします。ただし、これらのプラグインでは、悪意のあるコードのアップロードまたは挿入を完全に防ぐことはできません。
最善の解決策は、信頼できるソースによって作成されたSVGファイルのみを使用し、SVGのアップロードを信頼できるユーザーに制限することです。セキュリティの詳細については、初心者向けの完全なWordPressセキュリティガイドを参照してください。
これを踏まえ、WordPressでSVGファイルを簡単かつ安全に使用する方法を3つの方法でご紹介します。特定の metod に興味がある場合は、以下のクイックリンクをご利用ください。
専門家のアドバイス： SVG画像ファイルの使用を決定する前に、画像編集ツールを使用してファイルサイズを圧縮し、WordPressの速度とパフォーマンスを向上させることもできることを忘れないでください。
準備はいいですか？ビデオチュートリアルから始めましょう。
動画チュートリアル
書き言葉での説明をご希望の場合は、そのままお読みください。
方法1：WPCodeを使用してWordPressでSVGファイルを許可する（推奨）
WordPressへのSVGアップロードを安全に許可する最も簡単な方法は、利用可能な最も強力なコードスニペットプラグインであるWPCodeを使用することです。
WPCodeには、サイトの多くの単一目的プラグインを置き換えることができる、事前設定されたコードスニペットの大きなライブラリがあります。これには、添付ファイルページを無効にする、クラシック投稿エディターを維持する、ウェブサイトの破損のリスクなしにSVGファイルアップロードを許可するスニペットが含まれています。
開始するには、無料のWPCodeプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
有効化したら、WordPressの管理画面のコードスニペット » スニペットを追加に移動してください。'svg'を検索し、「SVGファイルのアップロードを許可」にマウスカーソルを合わせます。
表示されたら、「スニペットを使用」をクリックしてください。
次に、「スニペットの編集」ページに移動します。ここでは、WPCodeがコードの実行に必要なすべての設定をすでに構成しています。
スイッチを「アクティブ」に切り替えてから、「更新」ボタンを押すだけです。
これで、WordPressからエラーメッセージや警告メッセージが表示されることなく、SVGファイルをアップロードできます。
その後、WordPressウェブサイトの他の画像と同様に扱うことができます。
デフォルトでは、WPCodeスニペットは「管理者」ロールを持つユーザーのみがWordPressにSVGを追加できるようにします。
コードスニペットの14〜16行目を削除することで、他のすべてのユーザーロールにも権限を付与できます。その後、11〜13行目の先頭に2つのスラッシュ「//」を追加して「コメントアウト」し、薄いタン色に変えることができます。
WPCodeは、コードではなくコメントと見なしたスニペットの一部を実行しません。これは以下の画像で例として確認できます。
いずれにしても、コードを削除すれば、すべてのユーザーがサイトにSVGファイルをアップロードできるようになります。変更を保存するには、必ず「更新」をクリックしてください。
方法2. SVG Supportを使用してWordPressにSVGファイルをアップロードする
この2番目の方法では、SVG Supportプラグインを使用します。これにより、WordPressの投稿やページ内にSVGを表示し、誰がアップロードできるかを制御できます。
まず、SVG Supportプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
有効化したら、設定 » SVG サポート に移動してプラグインの設定を行います。
設定ページで、「管理者に制限？」オプションの横にあるチェックボックスをオンにするだけです。これにより、WordPressでSVGファイルをアップロードできるのはサイト管理者のみになります。
次のステップは、高度なモードをオンにすることです。CSSアニメーションやインラインSVGレンダリングなどの高度な機能を使用したい場合にのみ、このオプションをチェックする必要があります。
設定を保存するには、「変更を保存」ボタンをクリックしてください。
新しい投稿を作成するか、既存の投稿を編集できるようになりました。投稿エディターで、他の画像ファイルをアップロードするのと同じようにSVGファイルをアップロードできます。
エディターに画像ブロックを追加し、SVGファイルをアップロードするだけです。
方法3：Safe SVGを使用してWordPressにSVGファイルをアップロードする
この方法ではプラグインも使用し、WordPressにアップロードされたSVGファイルをサニタイズできます。
まず、Safe SVGプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
このプラグインはすぐに機能し、設定する必要はありません。そのままSVGファイルをアップロードできます。
欠点は、このプラグインはWordPressサイトで投稿を書き込めるすべてのユーザーがSVGアップロードを許可することです。ファイルをアップロードできるユーザーを制御するには、プラグインのプレミアムバージョンを購入する必要があります。
この記事が、WordPressで安全にSVGファイルを追加する方法を学ぶのに役立ったことを願っています。また、ウェブサイトのヘッダーにウィジェットを追加する方法に関するガイドや、初心者向けの便利なコードスニペットの専門家によるおすすめもご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
デニス・ムトミ
クライアントのロゴをPNGからSVGに切り替えました。特にモバイルでの速度差は驚くほどでした！
私の経験からの簡単なヒント：常にPNGのバックアップを作成し、コードで「picture」要素を使用してください。これにより、古いブラウザにも対応しながら、最新のブラウザではSVGのメリットをすべて享受できます。
セキュリティに関するヒントも本当に感謝しています。クライアントのサイトを扱う際には非常に重要です！
イジー・ヴァネック
かつてSVGファイルが危険な理由について興味深い記事を読みました。しかし、その情報を得る前に、WordPressがSVGのアップロードを拒否し続け、私はかなりのフラストレーションを感じていました。ウェブ用のアイコンをSVG形式で持っています。しかし、WPCodeと簡単なスニペットが本当に助けになりました。これは、初心者でも扱える、シンプルで機能的なソリューションです。
ユージン・ベラスケス
すべてのSVGプラグインを追加しましたが、自分で作成したSVGの追加がまだブロックされています。リスクや悪意のあるコードはありません。WordPressにSVGファイルを追加する他の方法はありますか？
WPBeginnerサポート
プラグインでもSVGをサイトに追加できない場合は、ホスティングプロバイダーに連絡して、WordPressの設定を上書きする可能性のあるセキュリティ設定がないか確認することをお勧めします。
管理者
フェリックス・クルシュ
ブロックが導入されて以来、「カスタムHTMLブロック」にSVGコードを追加するだけで済みます。スニペットプラグインはもう必要ありません。
WPBeginnerサポート
画像が他の場所にホストされている場合は機能しますが、アップロードするには現時点ではスニペットを使用することをお勧めします。HTMLスニペットを使用してPHPコードを追加することも望ましくないでしょう。もしそれがあなたの意味するところであれば、
管理者
スナック
こんにちは。
記事をありがとうございます。
いつもあなたのウェブサイトを参照しており、多くのことを学んでいます。
ここで、ウェブサイトでSVGファイルを使用するのは安全ではないと書かれています。
私の質問は、Adobe IllustratorなどのソフトウェアでSVGファイルを自分で作成した場合、
ウェブサイトにアップロードするのは再び安全ではないのですか？
そして、セーフSVGプラグインを使用すべきですか？
ありがとうございます！
WPBeginnerサポート
SVGを作成したのがあなた自身であり、あなたのサイトにファイルをアップロードする他のユーザーがいない場合は、セーフSVGプラグインを使用しなくても問題ありません。
管理者
スナック
その場合、脆弱性は全くなくなるということですか？
WPBeginnerサポート
心配すべき脆弱性は、悪意のあるコードが追加されている可能性のある未知のソースからSVGを追加した場合です。
スナック
ご回答いただき、誠にありがとうございます。
ワゲラ氏
素晴らしい情報をご共有いただき、ありがとうございます。
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです
管理者
アラン・スミス
どうもありがとうございます
WPBeginnerサポート
どういたしまして
管理者
アマンドィーヌ
こんにちは。SVGプラグインを正常にアップロードでき、SVGファイルをアップロードできますが、ロゴのクロッピングの段階でクロッピングができず、ウェブサイトに表示されません。左側のカスタマイズパネルではきれいで鮮明に表示されますが、ウェブサイトには表示されません。一方、PNGファイルをアップロードすると、クロッピングが機能し、カスタマイズパネルとウェブサイトの両方に表示されます。SVGロゴをウェブサイトに表示するために何かする必要がある場合は、お知らせいただけますか？ありがとうございます。
WPBeginnerサポート
WordPressサイト以外のものを使用してSVGを編集し、目的のサイズにトリミングする必要があります。
管理者
プシュクラジ
svgz（svg圧縮）をアップロードしたいのですが、セキュリティ上の理由でエラーが発生します。SVG形式は問題なくアップロードできますが、ファイルサイズを削減するためにsvgzが必要です。この件について、ご協力いただけますでしょうか。
よろしくお願いいたします。
WPBeginnerサポート
そのファイルタイプを許可するには、こちらのガイドをご覧ください：https://014.leahstevensyj.workers.dev/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
管理者
ブライアン
こんにちはWPBeginner様、
ウェブサイトにSafe SVGプラグインを追加しましたが、SVGファイルが破損してアップロードされるようです。使用できません。これはどうしてですか？
WPBeginnerサポート
プラグインのサポートに連絡して問題について知らせるべきです。彼らが対応できるはずです
管理者
フウ・タイ
完全に網羅された情報、ありがとうございます。
SVG Supportを使ってウェブロゴをアップロードできるでしょうか？
WPBeginnerサポート
テーマがこれを明示的にオーバーライドしない限り、可能であるはずです。
管理者
スコット
ピクセル画像を数学的なものに変換する複雑さを理解しています。
JPEGや.png画像をSVGに変換するための、かなり簡単または自動化された方法やプログラムはありますか？
編集スタッフ
ヘイ、スコット、
私たちの知る限り、まだありません。
管理者
カクトゥス
私が試した限りでは、Inkscapeはまさにそれを実行できます。無料であり、Windows、Mac、Linuxで動作します。
Gimp、Illustrator、そして確信はありませんが、Kritaもできるかもしれません。
GimpとKritaも無料でマルチOSです。
確かに、かなり重くて高品質な写真をSVGに変換しました（以前はカメラから直接撮影したJPG画像でした）が、問題なく機能しました。時間がかかりましたが、機能します。私のシステムがかなり貧弱だからかもしれません。
サルマン・ラヴフ
ほとんどのベクター編集ソフトウェアにはその機能があります。InkscapeとIllustratorの両方で可能です。ただし、複雑な形状や多くの色（すべての実写画像がこれに該当します）がある場合、結果はそれほど良くありません。この機能は、4色未満の画像に使用するのが最適です。色が少ないほど良いです。