WordPressサイトにSVGファイルを追加することで、画像をシャープで鮮明に見せることができます。
しかし、WordPressでは画像、音声、動画など多くの種類のファイルをアップロードできますが、SVGファイルには対応していません。
これは、SVGファイルがセキュリティ・リスクをもたらす可能性があるためです。しかし心配はいらない。SVGを安全に使う方法があります。
この投稿では、WordPressにSVG画像ファイルを簡単かつ安全に追加する方法をご紹介します。
SVGとは？
SVG（Scalable Vector Graphics）は、XMLマークアップ言語を使ってベクターグラフィックスを定義するファイルフォーマットです。SVGの主な利点は、画質を落としたりピクセル化したりすることなく画像を拡大できることです。
SVGはどのように機能するのか？
SVG（Scalable Vector Graphics）とは、XMLを用いて二次元の図面を表示する技術である。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つご紹介します。各方法に興味がある方は、以下のクイックリンクをご利用ください：
専門家のアドバイス：SVG画像ファイルの使用を決定する前に、画像編集ツールを使ってファイルサイズを圧縮し、WordPressのスピードとパフォーマンスを向上させることができることも忘れてはならない。
準備はいいかい？チュートリアル動画から始めよう。
動画チュートリアル
文章での説明をお望みの方は、このまま読み進めてください。
方法1.WPCodeを使用してWordPressでSVGファイルを許可する（推奨）
WordPressへのSVGアップロードを安全に許可する最も簡単な方法は、利用可能な最も強力なコードスニペットプラグインであるWPCodeを使用することです。
WPCodeは、サイト上の多くの個別プラグインを置き換えることができる、設定済みのコードスニペットの大規模なライブラリを持っています。添付ファイルを無効化し、クラシック投稿エディターを維持し、SVGファイルのアップロードを許可するためのスニペットが含まれており、すべてあなたのサイトを破壊するリスクはありません。
開始するには、無料のWPCodeプラグインをインストールし、有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、WordPress管理画面のCode Snippets ” Add Snippetに移動します。svg」を検索し、「Allow SVG Files Upload」にマウスオーバーしてください。
スニペットが外観に表示されたら、『Use snippet』をクリックする。
次に、’Edit Snippet’ページに移動し、WPCodeはすでにコードを実行するために必要な設定をすべて行っています。
必要なのは、スイッチを「有効化」にしてから「更新」ボタンを押すだけだ。
これでWordPressがエラーや警告メッセージを出すことなく、SVGファイルをアップロードできるようになった。
WordPressサイトの他の画像と同じように扱うことができます。
初期設定では、WPCodeスニペットは「管理者」権限を持つユーザーだけがWordPressにSVGを追加することができます。
また、コードスニペットの14行目から16行目を削除することで、他のすべてのユーザー権限グループに権限を与えることができます。次に、11行目から13行目の先頭に2つのスラッシュ「//」を追加し、薄い褐色にすることで「コメントアウト」することができます。
WPCodeは、コードではなくコメントとみなされたスニペットの部分を実行しません。この例を下の画像で見ることができます。
いずれにせよ、コードを削除すれば、すべてのユーザーがあなたのサイトにSVGファイルをアップロードできるようになります。本当に〜してもよいですか？
方法2.SVGサポートを使ってWordPressにSVGファイルをアップロードする。
この2つ目の方法は、SVG Supportプラグインを使用する。このプラグインを使えば、WordPressの投稿やページ内にSVGを表示したり、アップロードできる人をコントロールしたりすることができる。
まず、SVG Supportプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、Settings ” SVG Supportでプラグイン設定を行います。
設定ページで、「管理者に制限しますか」オプションの隣にあるボックスにチェックを入れるだけです。これでサイト管理者のみがWordPressでSVGファイルをアップロードできるようになります。
次のステップは、アドバンスモードをオンにすることです。CSSアニメーションやインラインSVGレンダリングなどの高度な機能を使いたい場合のみ、このオプションを設定する必要があります。
変更を保存」ボタンをクリックして、設定を保存することを忘れないでください。
新規投稿または既存投稿の編集ができるようになりました。投稿エディターでは、他の画像ファイルをアップロードするようにSVGファイルをアップロードすることができます。
エディターに画像ブロックを追加し、SVGファイルをアップロードするだけです。
方法3.Safe SVGを使ってWordPressにSVGファイルをアップロードする。
この方法もプラグインを使用し、WordPressにアップロードされたSVGファイルをサニタイズすることができる。
最初に行う必要があるのは、Safe SVGプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインは箱から出してすぐに使えるし、設定することもない。そのままSVGファイルのアップロードを開始できます。
欠点は、このプラグインはWordPressサイトに投稿日を書くことができるすべてのユーザーによるSVGのアップロードを許可することである。アップロードできるユーザーをコントロールするには、プラグインのプレミアムバージョンを購入する必要がある。
WordPressでSVGファイルを安全に追加する方法について、この投稿がお役に立てば幸いです。サイトのヘッダーにウィジェットを追加する方法や、初心者のための便利なコードスニペットのエキスパートピックもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Eugene Velasquez
I have added all the SVG plugins but still am being blocked from adding SVGs, which I have created on my own so there is no risk or malicious code. Is there another way to add the SVG files to wordpress?
WPBeginner Support
If even the plugins do not allow you to add SVGs to your site, we would recommend reaching out to your hosting provider to ensure they do not have a security setting that may be overriding your WordPress.
管理者
Felix Krusch
Since the inception of Blocks you can just add SVG code in a “Custom HTML Block”. No snippet plugin necessary anymore.
WPBeginner Support
If the image is hosted elsewhere that would work but to upload we would recommend using the snippet at this time. You would also not want to add the PHP code using the HTML snippet if that is what you mean
管理者
sn
Hi,
Thanks for your articles.
Usually I refer to you website and I learn many things from it.
Here you wrote using svg files in websites is not safe.
My question is that if I create the svg file myself from adobe illustrator or similar software,
is it again unsafe to put it in my website?
and should I use safe svg plugin?
Thanks!
WPBeginner Support
If you are the person who created the SVG and there are no other users uploading files to your site, you are fine to not use the safe SVG plugin.
管理者
sn
Do you mean there will be no vulnerabilities in such case?
WPBeginner Support
The vulnerabilities to worry about would be if you add an SVG from an unknown source that could have added malicious code.
sn
Thank you very much for your answer.
mr waghela
thank you sir for share best info
WPBeginner Support
Glad our guide was helpful
管理者
Alan Smith
Thanks a lot
WPBeginner Support
You’re welcome
管理者
Amandine
Hi, I have successfully uploaded the SVG plugin and can upload my SVG file but at the point of cropping the logo, I cannot crop it and therefore it does not appear on my website. It appears nice and crisp on the side customising panel on the left but not on the website. Whereas if I upload a PNG file, the cropping works and it appears on the customising panel as well as the website. Please could you let me know if there’s anything I need to do for my SVG logo to appear on the website? Thank you
WPBeginner Support
You would need to edit your SVG using something other than your WordPress site to crop it to the size you’re wanting
管理者
pushkraj
I want to upload a svgz (svg compressed) but I get an error of security reasons. Although I can upload SVG. format without any problem but I need svgz in order to reduce the file size. Please help me with my query.
Thank you.
WPBeginner Support
To allow that file type, you would want to take a look at our guide here: https://www.wpbeginner.com/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
管理者
Brian
Hello WPBeginner,
I added the plugin Safe SVG to my website but it seems my SVG files get broken uploaded. I cannot use them. How is this possible?
WPBeginner Support
You would want to reach out to the plugin’s support and let them know about the issue and they should be able to assist
管理者
Huu Tai
Thank for a fully covered info,
I wonder if I could use SVG Support to upload the web logo?
WPBeginner Support
So long as your theme does not specifically override this, you should be able to.
管理者
Scott
I understand the complexity of converting pixel images to mathematical.
Has there come along a fairly simple or automated method or program to convert jpegs and .png images to SVG?
Editorial Staff
Hey Scott,
Not that we are aware of yet.
管理者
Cactoos
As far as I tried, inkscape can do exactly that. It’s free and it works in windows, Mac, and Linux.
Gimp, illustrator, and I’m not that sure, but maybe krita can do this also.
Gimp and krita are also free and multi OS.
Indeed I converted a pretty heavy and high quality photo to svg (previous jpg image direct from the photo camera) and it worked flawlessly, it took his time, but it works. It might be because I’m in a pretty weak system.
Salman Ravoof
Almost all vector editing software have that functionality. Both Inkscape and Illustrator can do it. However, the results won’t be as good if you have complex shapes and a lot of colours (all real life images come under this) . This functionality is best used for images which have less than 4 colours, the lesser the better.