WordPressでSVGファイルをメディアで使ってみる「SVG Support」

SVG形式のファイルはWordPressの初期状態ではサポートされていません。しかしながら、ロゴなどの元がベクターデータの場合、SVG形式のファイルをメディアファイルとして使いたいことがあります。

SVGファイルをサポートしているプラグインは、今回紹介する「SVG Support」や「Safe SVG」などがありますが、WEBサーバーのPHPバージョンが最新状態を保てないなどの理由がある場合、プラグインによっては使用できなくなってしまう場合があります。

今回後者の「Safe SVG」が2023年3月のアップデートによりPHPバージョン7.0以上から7.4以上ではないと動作しなくなってしまう事例が出たため、PHPバージョンが7.2以上でも作動する「SVG Support」をご紹介します。

SVG Supportで出来ること

イラストレーターなどでベクターデータを作成している場合、JPEGやPNGなどの画像ファイルに書き出しをせずSVG形式でファイルを保存し、メディアとして取り扱うことにより、WEB上でベクターとしてメディアが使用できます。

たとえば、このサイトの左上にある「Re'cross」のロゴですが、こちらは実際にSVGファイルを使用しています。JPEGやPNGファイルですと拡大すると画質が低下してしまいますが

ブラウザの倍率を強制的に上げて拡大をしても、このロゴはぼやけたりすることはありません。

これはSVG形式で保存し、ブラウザがベクターとして表示させているからになります。

WordPressの初期状態ではSVGファイル形式をサポートしていないため、メディアにアップロードしようとしても、図のように「このファイルタイプをアップロードする権限がありません。」と表示されてしまいます。

「SVG Support」を使用することにより、解消することが可能になります。

SVG Supportをインストール

WordPress管理画面から、プラグインの新規追加で「SVG Support」と検索をしてインストール、有効化します。

新規追加の検索で出てこない場合には、コチラからダウンロードし、wp-content/pluginsにインストールすることでも可能です。

特に設定などはせず、プラグインが有効化されると、そのままメディアへ図のようにSVG形式ファイルをアップロードできるようになり、JPEGなどのようにメディアとして利用することが簡単に出来るようになります。

さいごに

グラデーションや半透明、一部に画像を使用しベクターデータとラスターデータが混在しているなどの場合は、正常に表示をされない場合もありますが、ロゴやマークなど、ぼやけては欲しくないメディアファイルの場合、SVG形式にし取り扱うことにより、高品質にホームページで表示をさせることが出来ます。

今回設定部分には触れませんでしたが、ダッシュボードの「設定＞SVG Support」からアップロードの権限などの調整ができたりもします。

Safe SVGの代替品として

Safe SVGが2023年3月22日のアップデートによりPHPバージョンが7.0から7.4以上でないと動作しなくなったため、WEBサーバーのPHPバージョンが7.4以上に出来ない場合など代替品として作動させることが出来ます。

SVG Supportをインストール有効化後に、Safe SVGをアンインストールしても私の場合、動作不良は出ませんでした。

Safe SVGを使われていて、同じ事例になられた場合、WordPress側でずっとエラーが出て、メール通知も来ますので、SVG Supportを代替手段として使ってエラーを解消するのも1つの手段かと思われます。