SVGとはScalable Vector Graphicsの略。ピクセルの代わりにベクターで構成される画像フォーマットの一種で、画像の形や色を数学的に説明したもので、XML形式で保存される。
これらの方程式は SVG 画像内のすべての点、図形、曲線、線、色を記述する。
JPEGやPNGのような他の画像フォーマットとは異なり、SVGは品質を損なうことなく拡大縮小（大きくしたり小さくしたり）することができます。このため、デスクトップ、タブレット、モバイル端末など、さまざまな画面サイズの画像に最適なファイル形式です。
SVGは2次元で、通常、イラスト、グラフィック、アイコンフォント、ブランディング画像に使用されます。しかし、アニメーションに使用することもできます。
その名の通り、SVGはスケーラブルでもある。このため、SVGは様々なサイズで表示する必要があるロゴやその他の画像に最適です。
SVG画像の長所
SVG画像は、グラフィックやイラストなど様々な用途に適しています。SVG形式の主な利点は以下の通りです：
- スケーラビリティ：ベクターを使用しているため、SVG画像は品質を損なうことなくあらゆるサイズに拡大縮小することができます。これは、すべてのサイズの画面で見栄えのするグラフィックを必要とするレスポンシブ・ウェブデザインに最適です。
- 編集可能：CSSとJavaScriptを使って、ウェブページ内で直接テキストエディターを使ってSVG画像を編集することができます。つまり、SVG画像に簡単に変更を加えることができます。
- ファイルサイズが小さい：SVGファイルは通常、JPEGやPNGのようなビットマップ画像に比べてファイルサイズが小さくなります。これはページの読み込み時間の短縮やWordPress全体のパフォーマンスの向上につながります。
- 互換性：SVGはすべて最新のウェブブラウザでサポートされています。つまり、あなたのSVG画像はほとんどすべてのオンラインユーザーに対して正しく表示されます。
SVG画像の欠点
SVGはすべての画像タイプに適しているわけではないことを覚えておいてください。以下はSVGファイルフォーマットの短所です：
- 難しい：SVG画像はJPEGやPNGのような標準的なラスター画像よりも複雑な場合があります。そのため、SVG画像を作成したり変更したりするには、画像編集ソフトのスキルや知識が必要になります。
- レンダリングの問題：古いブラウザーや端末では、SVG グラフィックスが正しくレンダリングされない場合があります。
- セキュリティの問題： SVGファイルはXMLマークアップ言語フォーマットで保存されており、悪意のあるコード、ブルートフォース攻撃、クロスサイトスクリプティング攻撃に対して脆弱である。
- ファイルサイズ：非常に詳細な画像の場合、SVGのファイルサイズはかなり大きくなります。これはサイトの読み込み時間を遅くする可能性があります。
SVG vs. JPEG vs. PNG イメージ
SVG、JPEG、PNGは、WordPressサイトを含むオンライン上で最もよく使われる画像ファイル形式です。しかし、これらにはいくつかの重要な違いがあります。
JPEGは主に写真画像に使われるフォーマットである。SVGとは異なり、JPEGはラスターまたはビットマップ画像であり、個々のピクセルで構成されている。
JPEG画像を拡大しすぎると、ピクセルが目に見えて目立つようになり、画像がぼやけて見えたり、ピクセルがつぶれて見えたりします。また、JPEG圧縮アルゴリズムのため、JPEG画像を保存すると画質が低下します。
PNGもJPEGと同じラスター画像フォーマットです。PNGは可逆データ圧縮を採用しており、画像を圧縮する際にデータが失われることはありません。このため、PNGは小さなファイルサイズの線画、テキスト、象徴的なグラフィックに最適な設定です。
ここでは、SVG、JPEG、PNG画像の違いを簡単に説明します。
| Attribute | SVG | JPEG | PNG |
|---|---|---|---|
| Scalability | Unlimited, no loss of quality | Limited, loses quality when scaled up | Limited, loses quality when scaled up |
| File Size | Relatively small and manageable | Can be large, depends on the quality | Usually larger due to lossless compression |
| Best For | Graphics and illustrations | Photographic images | Line art, text, and Iconic graphics |
| Supports Transparency | Yes | No | Yes |
SVG画像を最適化する方法
WordPressのコンテンツに画像を埋め込む前に、ウェブ用に最適化することをお勧めします。これにより、ページが素早く読み込まれ、良いユーザー体験を提供できるようになります。
まず第一に、SVG画像は使いたい寸法で保存してください。拡大すると、画質には影響がなくてもファイルサイズが大きくなり、ページの読み込み時間が長くなります。
また、SVG画像ファイルから不要なデータを削除することも検討すべきです。これはSVG Cleaner & OptimizerのようなオンラインのSVGマークアップクリーニングツールを使うことで可能です。
最後に、SVGファイルでgzip圧縮を使用することが重要です。詳しくはWordPressでgzip圧縮を有効化する方法をご覧ください。
WordPressでSVG画像を使用する方法
WordPressでは、XMLマークアップ言語のセキュリティ脆弱性のため、初期設定でSVG画像のアップロードを許可していません。そのため、信頼できるユーザーのみがWordPressサイトのメディアライブラリにSVG画像をアップロードできるようにすることをお勧めします。
無料のWPCodeプラグインを使えば、SVGサポートを簡単に有効化できます。管理者のみSVGアップロードを手動で有効化できる最高のコードスニペットプラグインです。
まず、WPCodeプラグインをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。
次に、WordPress管理画面のCode Snippets ” Add Snippetに移動する必要があります。svg」を検索し、「Allow SVG Files Upload」にマウスオーバーしてください。
次に、『スニペットを使用する』をクリックします。
その後、コード・スニペットを「有効化」に切り替え、「更新」をクリックするだけです。
これにより、あなたのサイトの管理者が安全にSVGをサポートできるようになります。
詳細と他のSVGサポートプラグインについては、WordPressのSVG画像ファイルを追加する方法のガイドを参照してください。
WordPressのSVG画像について、この投稿がお役に立てれば幸いです。また、WordPressの便利なTipsやトリック、アイデアに関する関連投稿は、以下の「Additional Reading」リストをご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
