サイトのロゴ画像などに最適なSVG形式の画像。拡大しても画質が落ちないメリットがありますが、
WordPressには、SVG形式の画像をアップすることはできません。次のようにエラーが発生します。

SVG形式のエラーメッセージ

そこで今回は、SVG画像をアップ可能にするプラグイン「SVG Support」と、WordPress上でSVG画像のサイズを変更する方法を解説いたします。

プラグインのインストール

管理画面から「SVG Support」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

svg supportのプラグインイメージ

SVG Support

プラグインのインストールにつきましてはこちらで詳しく解説しています。

「SVG Support」を有効化してSVG画像をアップしてみよう

特に設定は不要で、ただ有効化するだけで、SVG形式のファイルがアップロード可能になります。

SVG形式のファイルがアップされていることの確認

手元のSVG形式の画像で試してみましょう。ファイルの拡張子が「.svg」になっていて、問題なくアップロードできていればOKです。

「SVG画像をどうやって作ればいいかわからない」方は、こちらの記事を参考にご覧ください。画像をドラッグ&ドロップするだけで簡単にSVG化できます。

SVGはその特徴から、ロゴやシンプルな図形などの画像に適しています。複雑な画像をSVG化させるのはやめましょう。逆に汚くなったり、容量が大きくなるデメリットがあり、SVGの特性を活かせないからです。

ロゴ画像などであれば、1枚のSVG画像であらゆるデバイスに対応可能で、容量自体も小さく済みます。

例えば、弊社が試したこちらのロゴ画像。

ロゴ画像のサンプル

・424 x 38 pxサイズのPNG画像:74KB
・サイズ変更し放題のSVG画像:たった4KB!

という結果になっています。

WordPressにアップしたSVG画像のサイズを変更するには?

WordPressにアップロードしたSVG画像を扱う場合、そのサイズをどのように調整すればわからないかもしれません。投稿やページにSVG画像を設置する際や、TCDテーマのロゴに設定するケースを例に変更方法をご紹介いたします。

投稿やページ内に設置したSVG画像のサイズ変更

投稿やページにSVG画像を設置した場合のサイズ変更方法をご紹介いたします。画像のサイズを変更しても画質に変化がないことがわかります。

クラシックエディタの場合

対象のSVG画像のimgタグに、以下のようなstyle属性を追加して任意の高さ(height)や幅(width)を指定すればOKです。

style="height:20px;"

クラシックエディタでSVGのサイズを変更する方法

ブロックエディタの場合

ブロックエディタをお使いの場合は、操作はとても直感的です。

本文内に追加したSVG画像にカーソルを合わせて、右上の「ブロックタブ」を選択します。

ブロックエディタでSVGのサイズを変更する方法

上記のように幅や高さを変更するフィールドが表示されるので、ここに任意の数値を入力して変更するだけです。リアルタイムでプレビューされます。どんなサイズで表示しても容量が変わらないのがいいですね。

TCDテーマのロゴに設定したSVG画像のサイズ変更

TCDテーマをお使いの方向けですが、テーマオプションのロゴにSVG画像を設定して、サイズ調整する方法をご紹介いたします。

以下は、SEEEDというテーマの設定例ですが、まずは、ロゴの設定箇所にSVG画像を設置します。

SEEEDでの設定例

ただセットするだけでは、このように小さく表示されてしまう場合があります。

SVGのロゴが小さく表示されている例

その場合は、カスタムCSSで任意のサイズを指定すればOKです。例えば、今回の場合は、以下のようなCSSになります。

/* PCヘッダーSVGロゴのサイズ調整 */
#header_logo img {
height: 15px;
}

高さ(height)のみを指定して、比率そのままで拡大しています。

SVGのロゴを拡大するためにサイズ指定した例

SVG画像なら、サイトやロゴデザインによって、最適なサイズに微調整できるメリットもありますね。画像を作成しなおす必要がなく、容量も変わらず、見た目も綺麗です。

まとめ

WordPressにSVG画像をアップロードできるプラグイン「SVG Support」と、SVG画像のサイズを変更する方法をご紹介いたしました。

プラグイン自体の操作は不要で、有効化するだけでSVGをアップできるようになります。あとは、設置したSVG画像に任意のサイズを指定するだけです。簡単なCSSを指定したり、ブロックエディタの機能でもサイズ変更できるので、扱いに困ることはないでしょう。

  • ロゴ画像のようなシンプルな画像に最適
  • シンプルなものであれば、PNGよりも圧倒的に軽量
  • サイズを大きくしても画質に影響なし
  • CSSでサイズ変更できるが、容量はもちろん変わらない

こういった特徴を活かして、WordPressでSVG画像を利用してみてください。

SVG関連の記事