サイトのロゴ画像などに最適なSVG形式の画像。拡大しても画質が落ちないメリットがありますが、
WordPressには、SVG形式の画像をアップすることはできません。次のようにエラーが発生します。
そこで今回は、SVG画像をアップ可能にするプラグイン「SVG Support」と、WordPress上でSVG画像のサイズを変更する方法を解説いたします。
目次
プラグインのインストール
管理画面から「SVG Support」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
プラグインのインストールにつきましてはこちらで詳しく解説しています。
WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインストール方法は、下記の2つになります。基本的には、...
「SVG Support」を有効化してSVG画像をアップしてみよう
特に設定は不要で、ただ有効化するだけで、SVG形式のファイルがアップロード可能になります。
手元のSVG形式の画像で試してみましょう。ファイルの拡張子が「.svg」になっていて、問題なくアップロードできていればOKです。
「SVG画像をどうやって作ればいいかわからない」方は、こちらの記事を参考にご覧ください。画像をドラッグ&ドロップするだけで簡単にSVG化できます。
JPGやPNGなどの画像ファイルをWeb上で使うと、拡大時やデバイスサイズによってはぼやけてしまう。 そんな問題を解決するのが、SVGなどの「ベクター画像」とよばれるもの。ロゴやアイコンに利用されることが多い画像フォーマットです。SVG画像を作成するには、Adobe Illustratorなど...
SVGはその特徴から、ロゴやシンプルな図形などの画像に適しています。複雑な画像をSVG化させるのはやめましょう。逆に汚くなったり、容量が大きくなるデメリットがあり、SVGの特性を活かせないからです。
ロゴ画像などであれば、1枚のSVG画像であらゆるデバイスに対応可能で、容量自体も小さく済みます。
Web上に存在する画像は、すべてビットマップ形式とベクター形式の画像のどちらかに分類されます。写真を含む、イラストや図形などもすべてこのどちらかに分類されます。 さらにビットマップ形式の中には、大きく分けてJPEG、PNG、GIFのファイル形式が存在し、それぞれ一長一短の特徴があります。 ...
例えば、弊社が試したこちらのロゴ画像。
・サイズ変更し放題のSVG画像：たった4KB！
という結果になっています。
WordPressにアップしたSVG画像のサイズを変更するには？
WordPressにアップロードしたSVG画像を扱う場合、そのサイズをどのように調整すればわからないかもしれません。投稿やページにSVG画像を設置する際や、TCDテーマのロゴに設定するケースを例に変更方法をご紹介いたします。
投稿やページ内に設置したSVG画像のサイズ変更
投稿やページにSVG画像を設置した場合のサイズ変更方法をご紹介いたします。画像のサイズを変更しても画質に変化がないことがわかります。
クラシックエディタの場合
対象のSVG画像のimgタグに、以下のようなstyle属性を追加して任意の高さ（height）や幅（width）を指定すればOKです。
ブロックエディタの場合
ブロックエディタをお使いの場合は、操作はとても直感的です。
本文内に追加したSVG画像にカーソルを合わせて、右上の「ブロックタブ」を選択します。
上記のように幅や高さを変更するフィールドが表示されるので、ここに任意の数値を入力して変更するだけです。リアルタイムでプレビューされます。どんなサイズで表示しても容量が変わらないのがいいですね。
TCDテーマのロゴに設定したSVG画像のサイズ変更
TCDテーマをお使いの方向けですが、テーマオプションのロゴにSVG画像を設定して、サイズ調整する方法をご紹介いたします。
以下は、SEEEDというテーマの設定例ですが、まずは、ロゴの設定箇所にSVG画像を設置します。
ただセットするだけでは、このように小さく表示されてしまう場合があります。
その場合は、カスタムCSSで任意のサイズを指定すればOKです。例えば、今回の場合は、以下のようなCSSになります。
/* PCヘッダーSVGロゴのサイズ調整 */
#header_logo img {
height: 15px;
}高さ（height）のみを指定して、比率そのままで拡大しています。
SVG画像なら、サイトやロゴデザインによって、最適なサイズに微調整できるメリットもありますね。画像を作成しなおす必要がなく、容量も変わらず、見た目も綺麗です。
まとめ
WordPressにSVG画像をアップロードできるプラグイン「SVG Support」と、SVG画像のサイズを変更する方法をご紹介いたしました。
プラグイン自体の操作は不要で、有効化するだけでSVGをアップできるようになります。あとは、設置したSVG画像に任意のサイズを指定するだけです。簡単なCSSを指定したり、ブロックエディタの機能でもサイズ変更できるので、扱いに困ることはないでしょう。
- ロゴ画像のようなシンプルな画像に最適
- シンプルなものであれば、PNGよりも圧倒的に軽量
- サイズを大きくしても画質に影響なし
- CSSでサイズ変更できるが、容量はもちろん変わらない
こういった特徴を活かして、WordPressでSVG画像を利用してみてください。
SVG関連の記事
Web上に存在する画像は、すべてビットマップ形式とベクター形式の画像のどちらかに分類されます。写真を含む、イラストや図形などもすべてこのどちらかに分類されます。 さらにビットマップ形式の中には、大きく分けてJPEG、PNG、GIFのファイル形式が存在し、それぞれ一長一短の特徴があります。 ...
JPGやPNGなどの画像ファイルをWeb上で使うと、拡大時やデバイスサイズによってはぼやけてしまう。 そんな問題を解決するのが、SVGなどの「ベクター画像」とよばれるもの。ロゴやアイコンに利用されることが多い画像フォーマットです。SVG画像を作成するには、Adobe Illustratorなど...
文章を書いているときに、見出しや一部の箇所にアイコンを表示したい時ってありませんか。 複雑なコンテンツや専門的な内容の記事では、文章だけよりもアイコンがある方がポップになって、とっつきやすくなったりもします。 というわけで、今回はWordPressの記事内にアイコンを簡単に表示可能なプラ...
コメント