WordPressでsvgファイルをアップロードする方法を紹介!

WordPressでsvgファイルを扱う方法を紹介!

takato(@n8takato)です!

WordPressでsvg形式のファイルを扱えるようにしたい

この記事では上記の課題を解決します。

WordPressは画像のアップロードが出来ますが、svg形式の画像をアップロードすることは出来ません。

デフォルトのままだとsvg形式のファイルを扱うことが出来ないのです。

今回は、WordPressでsvg形式のファイルを扱えるようにする方法を紹介します。

    この記事でわかること
  • WordPressでsvg形式のファイルを扱う方法

またm、他の記事でWordPressで画像の拡張子をwebpに変換する方法を紹介しています。

詳しくは「WordPressで画像の拡張子をwebpに変換する方法を紹介!」を読んでください。

TAKATO BLOG
WordPressで画像の拡張子をwebpに変換する方法を紹介! WordPressにアップロードされている画像の拡張子をwebpに変換する方法を紹介します!webpに変換するには「EWWW Image Optimizer」というプラグインを使用します。
目次

WordPressでsvg形式のファイルを扱う方法

WordPressでsvg形式のファイルを使えるようにするには、プラグインを導入する必要があります。

必要なプラグインは下記のどちらかです。

  • Safe SVG
  • SVG Support

プラグインはどちらでも構いません。僕はSafe SVGというプラグインをインストールしたので、こちらの使い方を説明します。

Safe SVGの使い方

Safe SVGを使うには、下記の2つを行う必要あります。

  1. プラグイン「Safe SVG」をインストール
  2. 「Safe SVG」を使えるように設定する

それぞれ説明します。

プラグイン「Safe SVG」のインストール

Safe SVGは、WordPressの他のプラグインをインストールするのと同じ方法で行います。

手順は下記の通りです。

  1. WordPress管理画面の「プラグイン」の「新規追加」を選択
  2. プラグインの検索部分に「Safe SVG」を入力して検索
  3. プラグイン「Safe SVG」をインストールする

上記の手順で「Safe SVG」をインストールすることが出来ます。

「Safe SVG」を使えるようにする

インストールしたプラグイン「Safe SVG」を設定します。

と言っても、プラグインを「有効化」するだけで設定完了です。

有効化した後は、svg形式のファイルをWordPressにアップロードすることが出来ます。

svg形式を使用する際の注意点

svg形式のファイルは、拡大しても画像が綺麗に見えるというメリットがあります。

しかし、svgは他の拡張子と比べて容量が大きくなってしまうというデメリットがあります。

容量の多い画像を多く使用すると、サイトの読み込み速度が低下してしまい、SEOに悪影響を与えてしまいます。

そうならないためにも、svg形式の画像はあまり多く使用しないことをお勧めします。

僕がweb制作をしている際、svg形式ファイルを使用する部分は企業のロゴくらいです。

それ以外はJPGやPNGの拡張子画像を使用しています。

最後に

この記事ではWordPressにsvgファイルをアップロードする方法を紹介しました。

プラグインをインストールし有効化するだけでWordPressにsvgファイルをアップロードすることが出来ます。

ただし、svgファイルは比較的に容量が多いので、あまり多くのsvgファイルをアップロードしないように気をつけてください。

¥2,200 (2022/04/14 12:53時点 | Amazon調べ)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる