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

  • 2021年12月5日
  • 2023年2月8日
  • wordpress
  • 1590view

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で表示させると綺麗なままになるので、オススメの表示方式です。

\IT未経験者からのサポートあり!転職サービス3選!!/

サービス名
未経験 未経験OK 未経験の転職専用 経験者向け
公開の求人数 ITエンジニア全体で1万件以上
ITエンジニア未経験で600件以上
未公開 5,000件以上
利用対象 全職種 IT特化 IT特化
特徴 ✓誰もが知る転職サービス
✓経歴を登録しておくとオファーが来る
✓企業担当者と条件交渉
✓スキルの身につく企業を紹介
✓IT専門のエージェントが対応
✓転職成功すると年収200万円以上の大幅アップがある
転職サポート内容
  • 求人検索
  • 企業担当者と交渉
  • 求人紹介
  • ライフプランのサポート
  • キャリア相談
  • 求人紹介
  • 提出書類の添削
  • 面接対策
公式サイト リクナビネクスト テックゲート レバテックキャリア

 

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

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

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

CTR IMG