wordpressでSVGファイルを表示させる方法とは?プラグインを利用した方法で解説します

  • 2021年12月5日
  • 2022年1月7日
  • wordpress
  • 22view

drawioやxmindで書いた図を綺麗なままwordpressで表示したい!

SVG画像(アニメーションも含む)をwordpressで表示したい。

どうしたら実現できるの?

 

このような疑問にお答えします。

wordpressでSVGを利用するには、ちょっとした準備が必要です。

 

この記事では、wordpressでSVG画像を表示する方法について解説します。

wordpressでSVG画像を表示するまでの手順

 

  1. SVG画像を用意する
  2. wordpressの「SVG Support」プラグインをインストールする
  3. プラグインのセキュリティ設定をする
  4. メディアに反映

 

 

SVG画像を用意する

SVG画像を用意します。

今回は、「storyset」という素材サイトを利用させて頂きます。

 

storysetから、任意の画像をSVGフォーマットでダウンロードします。

storysetにある画像は、PNGやSVGフォーマットに対応しているため、使い勝手が良いのです!

 

 

ポイント
SVG画像は、どんなに拡大しても劣化しません。

しかもファイル容量も軽く、拡大しても容量は増えないのが特徴です。

 

プラグインを入れる。

wordpressは、セキュリティ上の観点から、そのままではSVG画像を利用できないようになっています。

SVGファイルは、プラグインをインストールすることによって、SVG画像を利用できるようになります。

プラグインは、「SVG Support」を利用します。

 

「SVG Support」をインストール方法は以下のとおりです。

  1. 「プラグイン」->「新規追加」の順に選択
  2. キーワードのところに「svg」と入力
  3. その結果、「SVG Support」が表示される
  4. 「SVG Support」をインストールする

 

「SVG Support」を使う理由は、2021年12月4日現在も更新されていること、セキュリティの設定ができるからです。

 

セキュリティ上の観点とは

SVG画像の中身は、XML形式のテキストのコードになっています。その結果、悪意があるプログラムを含めることができてしまいます。

そのような理由から、wordpressではデフォルトではSVGを利用できないようになっています。

 

「SVG Support」プラグインのセキュリティ設定をする

SVGのアップロードは、管理者のみできるように設定する。

その理由は、(SVGに仕込まれた)悪意があるプログラムを、第3者に実行されないようにするためです。

 

設定方法としては、「SVG Support」プラグインの設定画面を開き、

「Settings」->「Restrict to Administrators?」の部分にチェックを入れます。

 

メディアライブラリにSVGファイルを反映

メディアライブラリに「storyset」からダウンロードしたSVG画像を反映させてみましょう。

正しく表示されることが確認できます。

上記の画像はSVGのため、拡大しても画像が劣化しないのが特徴です。

 

その後、wordpressの記事内でSVGを使うことができるようになります。

 

アイキャッチ画像ではSVGが使えないため、これまで通りPNG、JPEGなどの画像ファイルを使います。

SVGファイルの中にアニメーションCSSを入れれば、アニメーションも可能です。

 

まとめ

以上、wordpressにSVG画像を表示する方法でした。

drawioやxmindを愛用する人にとって、作成した図は、綺麗な画質のまま使いたいものです。

SVGで表示させると綺麗なままになるので、オススメの表示方式です。

 

 

最新情報をチェックしよう!
>プログラミングスクール検索・比較表サイト

プログラミングスクール検索・比較表サイト

ワンクリック、さらに詳細に条件を指定してプログラミングスクールの検索ができます。さらに比較表により特徴を細かく比較できる!

CTR IMG