drawioやxmindで書いた図を綺麗なままwordpressで表示したい！
SVG画像(アニメーションも含む)をwordpressで表示したい。
どうしたら実現できるの？
このような疑問にお答えします。
wordpressでSVG画像を利用するには、ちょっとした準備が必要です。
この記事では、wordpressでSVG画像を表示する方法について解説します。
wordpressでSVG画像を表示するまでの手順
- SVG画像を用意する
- wordpressの「SVG Support」プラグインをインストールする
- プラグインのセキュリティ設定をする
- メディアに反映
SVG画像を用意する
SVG画像を用意します。
今回は、「storyset」という素材サイトを利用させて頂きます。
storysetから、任意の画像をSVGフォーマットでダウンロードします。
storysetにある画像は、PNGやSVGフォーマットに対応しているため、使い勝手が良いのです！
ポイント
SVG画像は、どんなに拡大しても劣化しません。
しかもファイル容量も軽く、拡大しても容量は増えないのが特徴です。
プラグインを入れる。
wordpressは、セキュリティ上の観点から、そのままではSVG画像を利用できないようになっています。
SVGファイルは、プラグインをインストールすることによって、SVG画像を利用できるようになります。
プラグインは、「SVG Support」を利用します。
「SVG Support」をインストール方法は以下のとおりです。
- 「プラグイン」->「新規追加」の順に選択
- キーワードのところに「svg」と入力
- その結果、「SVG Support」が表示される
- 「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を使うことができるようになります。
まとめ
以上、wordpressにSVG画像を表示する方法でした。
drawioやxmindを愛用する人にとって、作成した図は、綺麗な画質のまま使いたいものです。
SVGで表示させると綺麗なままになるので、オススメの表示方式です。
＼IT未経験者からのサポートあり！転職サービス3選！！／
| サービス名 | |
|
|
|---|---|---|---|
| 未経験 | 未経験OK | 未経験の転職専用 | 経験者向け |
| 公開の求人数 | ITエンジニア全体で1万件以上 ITエンジニア未経験で600件以上 |
未公開 | 5,000件以上 |
| 利用対象 | 全職種 | IT特化 | IT特化 |
| 特徴 | ✓誰もが知る転職サービス ✓経歴を登録しておくとオファーが来る |
✓企業担当者と条件交渉 ✓スキルの身につく企業を紹介 |
✓IT専門のエージェントが対応 ✓転職成功すると年収200万円以上の大幅アップがある |
| 転職サポート内容 |
|
|
|
| 公式サイト | リクナビネクスト | テックゲート | レバテックキャリア |