WordPress

ワードプレスで「SVG」ファイルが使えるプラグインを紹介します

サイトの「ロゴ」や「ヘッダー画像」の画質を上げるなら「SVG」がおすすめです。

SVG Support」プラグインを追加すれば、ワードプレスで「SVG」が使えるようになります。

 

 

ただSVGは容量が大きいので、多用すると表示スピードが遅くなるのでご注意を。

下記に「jpg」「png」「svg」を比較した画像も載せました。気になる方はチェックして下さい。

 

ちなみにこの記事のアイキャッチ画像だけ「SVG」を使ってます。

他の記事と比較してもらえれば、分かりやすいかも知れません。

 

SVGとは?

SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、一種の画像フォーマットになります。

JPEGやPNGと言ったようなwebでよく見かけられる画像との違いは、PEGやPNGがビットマップデータなのに対し、SSVGはXMLをベースにした二次元ベクターデータであることです。

このベクターデータとは「画像を、点の座標とそれを結ぶ線(ベクター、ベクトル)などの数値データをもとにして演算によって再現する方式」であり、このデータ形式で作られた画像は「拡大・縮小しても画質が損なわれない」といった特徴を持っています。

転用:今こそ取り組むSVGとは

SVGを簡単に説明すると、画像を拡大しても画質が落ちないということです。

 

画質の比較

左から「jpg」「png」「svg」。

画像データの大きさは以下の通りです。

  • jpg:1920 x 1080 px(327 KB)
  • png:1920 x 1080 px(3 MB)
  • svg:1440 x 809 px(4 MB)

上の画像だと少し分かりにくいと思うので、大きめの画像も載せときます↓↓

 

jpg

 

png

 

svg

 

いかがでしょうか?

感覚的なものなので、気にならない方もいるかも知れません。

 

ただ実際に「SVG」でロゴ画像を作ってみると違いが分かると思います。

プラグイン「SVG Support」を追加するだけなので、ぜひ使ってみてください。

 

SVGファイルがダウンロードできるサイト

ぼくは「Canva Pro」を愛用してます。

有料ですが、お金払う価値はあります。31日間の無料体験もやってるので、気になる方はお試しください。

-WordPress