スケーラブルベクターグラフィックス（SVG）画像形式のガイド

公開: 2022-04-04

あなたが逃げることができないインターネットの1つの側面があります：画像。 Webの初期の頃は、それは厳密なテキストのみの問題でした。 ただし、鮮明なビジュアルを表示するのに役立つ専用の画像形式が用意されています。 スケーラブルベクターグラフィックス（SVG）形式は、利用可能な最新かつ最も柔軟な形式の1つです。

後で詳しく説明しますが、SVGは、フロントエンドに画像として表示されるデータのコレクションです。 これは、カスケードスタイルシート（CSS）を使用して画像を操作できることを意味します。 さらに、品質を損なうことなく、必要に応じてサイズを変更できます。

この投稿では、Scalable Vector Graphicsと、それらがどのように役立つかについて詳しく説明します。 また、WordPressWebサイトにそれらを含める方法についても説明します。

最も一般的なWeb画像形式のクイック入門書

SVGとその使用方法に移る前に、Webで使用する主要な画像形式について説明する価値があります。 注意すべき3つがあります：

  • 合同写真専門家グループ（JPEG）。 名前が示すように、デジタルカメラで撮った写真を表示したい場合は、これがあなたにぴったりのフォーマットです。
  • ポータブルネットワークグラフィックス（PNG）。 PNG形式を使用して、AdobeIllustratorのグラフィックなどの作成されたグラフィックを表示することをお勧めします。
  • グラフィックスインターチェンジフォーマット（GIF）。 ねえ、誰もがソーシャルメディアの反応として使用するテレビ番組の面白いクリップが好きです！ GIFは、移植性のあるアニメーショングラフィックスに最適な形式です。

好きなフォーマットを選択する人もいますが、これは最適なアプローチにはなりません。 たとえば、すべての画像をGIFにすることを選択した場合、天文学的なファイルサイズと低品質のビジュアルが表示される可能性があります。 対照的に、PNGはより最適な形式であるため、グラフィックスにJPEGを使用することは望ましくありません。

スケーラブルベクターグラフィックスフォーマットとは

一部の分野で技術を習得するため、このセクションではご容赦ください。 また、SVGの概念は混乱を招く可能性があります。

スケーラブルベクターグラフィックスは存在しません（一種）。 実際、これらはグラフィックや画像ではなく、Extensible Markup Language（XML）の形式です。 知らない人にとっては、これはHTMLに近い兄弟ですが、その言語のいくつかの側面（事前定義されたタグなど）はありません。

画像のXMLを表示するコードエディタ。

すでに理解しているかもしれない比較として、CSSを使用して図形を作成する方法を検討してください。 これについては、後ほど詳しく説明します。 このCSSが、標準のファイル形式と構造（たとえば、 image.svg ）を使用して呼び出すドキュメントラッパーに組み込まれていると想像してみてください。

HTMLはヘッダー、段落、セクション、リストなどを定義するフレームワークを提供するので、SVGは円や長方形などの形状を定義するフレームワークを提供すると言うのがより正確です。 ただし、これでもSVG形式がある（場合によっては必要になる）理由は説明されていません。 これについては次に話します。

SVGがある理由

SVGの前は、PNGを使用してグラフィックを表示していました。 Web上の初期の画像はGIFである可能性がありますが、一般に、PNGが主要な画像形式です。 問題はそれほど多くはありません。「なぜSVGがあるのですか？」、さらに「SVGが解決できる現在の画像形式には何が欠けているのですか？」 答えは、ダイナミズムです。

主要なWeb画像形式を振り返ると、2つは作成されたグラフィック（JPEGとGIF）にはあまり適していません。 これにより、PNGに負担がかかります。 ただし、PNGにはいくつかの問題がありますが、これらは現在のWebでのみ明らかになっています。

  • これらは静的であり、画像をオフラインで作成し、その特定の形式としてエクスポートします。 これは、それがやや柔軟性がないことを意味します。
  • ひいては、画像の「構成」を変更することはできません。 作成および表示するデバイスが多数あることを考えると、これらの「ビューポート」に適応する必要がある場合があります。 PNGを使用して、デスクトップおよび主要なモバイルデバイス専用のすべてのロゴサイズを作成するために必要な労力を費やしてください。
  • PNGは軽量でもかまいませんが、画像の最適化を確実に行うのはデザイナーとサイト所有者の責任です。 PNGは、最適化を行わないと、重い場合があり、メガバイトを超える場合もあります。

さらに、PNGは、十分に高い画質を提供できるオプションがほとんどなかったときに、ギャップの一部を埋めました。 当時、CSSはまだ揺籃期にあり、現在の設計と開発の範囲はまだありませんでした。

たとえば、2010年以降、 border-radiusプロパティしか使用できませんでした。これにより、丸いエッジや円を定義することができます。 ボタンで実際に動作していることがよくわかります。

Webページで強調表示されたボタン。CSSが[検査]パネルに表示され、境界線の半径が表示されます。

CSSを使用して、画面に合わせて拡大縮小できる図形を作成しますが、ScalableVectorGraphicsはそれ以上のことを実行できます。 実際、これを行うには、CSSではなくSVGを使用しますが、SVGも特効薬ではありません。

スケーラブルベクターグラフィックスの長所

他のすべての画像形式と同様に、ScalableVectorGraphicsは完璧ではありません。 もちろん、ポジティブな点はたくさんあります。

  • SVGはデバイスの寸法に適合しますが、多くの場合、それ以上の介入は必要ありません。 これにより、開発または作成の時間が短縮されます。
  • 必要なSVGは1つだけなので、画像に関連付けられているファイルは小さいです。 対照的に、PNGロゴはいくつかの異なるサイズと寸法を提供する必要があります。 これはサーバースペースを占有します。
  • さらに、キロバイトのコストで1つのファイルをロードするだけでよいため、SVGはPNGよりもパフォーマンスが高くなります。 PNGファイルのそのパッケージは、それらの品質、量、および最適化に応じてメガバイト単位になる可能性があります。

全体として、SVGを使用すると、他のどの画像形式よりも多くのことができます。 開発者とグラフィックデザイナーの両方が、コードを介して、または専用の描画アプリから一般的な作成をエクスポートすることにより、SVGを作成できます。 それらはWebの開発とより密接に結びついているため、採用が増えています。

スケーラブルベクターグラフィックスの欠点

ただし、すべてがバラ色というわけではありません。 SVGには、注意が必要ないくつかの問題がまだあります。

  • 他のコアWebの側面のほとんどとは異なり、このテクノロジーは発展途上にあります。 多くの人がScalableVectorGraphicsに多くのことを期待しているため、できることとやりたいことの間には「ギャップ」があります。
  • 基本的なSVGサポートはほとんどのブラウザーで利用できますが、使用しているブラウザーによっては、完全な機能セットを利用できない場合があります。 繰り返しになりますが、SVGにはまだ明らかではない可能性があります。フォーマットの機能を確認するには、より高度な機能のためのより優れたブラウザーサポートが必要です。
  • 場合によっては、SVG画像の精度が低下したり、見栄えが悪くなったりすることがあります。 これは、期待どおりにサイトの読み込みに依存する必要があるためです。 エラーのためにWebページをリロードしなければならなかった時間を覚えている場合は、SVG画像だけでこれが起こっていることをイメージしてください。

また、場合によっては、コーディングの知識がないとSVGを作成するのが難しいと言えます。 AffinityDesignerやAdobeIllustratorなどのグラフィックプログラムでは、はるかに優れたサポートがあります。 Google描画などのアプリでのSVGエクスポートもサポートされています。

Google描画内のScalableVectorGraphicsオプション。

これは改善された領域ですが、他の画像形式と比較するとまだ少し遅れています。

これらの欠点にもかかわらず、あなたはそれらを軽減することができます。 確かに、基本的な使用法については、ほとんどすぐに実装できます。 実際、WordPressはいくつかの手順を実行すればこのサポートも提供します。これについては、次に説明します。

WordPressWebサイトでSVGを使用する方法

悪いニュースは、何の作業もせずにSVGをWordPressにアップロードしたい場合、それができないということです。 現在のScalableVectorGraphicsサポートに関する追加の問題の1つは、セキュリティ上の理由から、WordPressではこれらの画像を標準としてアップロードできないことです。

SVGエラーを表示するWordPressダッシュボード。

理由はこの記事の範囲を超えています。 つまり、SVG形式は実際の画像ではなくドキュメントであるため、悪意のあるユーザーが潜在的なスクリプト攻撃を組み込む可能性があります。 これが意味するのは、より安全な代替手段を見つける必要があるということです。

Webの他の場所では、functions.phpファイルにコードを追加してSVGアップロードを有効にする手順に出くわします。 ただし、安全性を保証できないため、この手順は実行しません。 代わりに、WordPressでよく行うことを実行できます。プラグインを使用します。 SVGサポートをお勧めします：

SVGサポートプラグイン。

プラグインをインストールしてアクティブ化したら、WordPress内の[設定]>[SVGサポート]画面に移動します。 これにより、いくつかの画面が表示されますが、[管理者に制限]にチェックマークを付けるだけで済みますか？ [設定]パネルのチェックボックス。

SVGサポート設定画面。

デフォルトでは、プラグインはすべてのユーザーにSVGをアップロードさせます。 これは、固有のセキュリティ問題に基づく悪いニュースである可能性があり、WordPressがそもそもそれらのファイルをアップロードできないのはまさにそのためです。 ただし、このボックスにチェックマークを付けると、プラグインはアップロードをサイト管理者のみに制限し、SVGの使用を標準としてより安全にします。

要約すれば

ウェブ上に画像を表示する方法はたくさんあり、ほとんどの人は自分が使用する形式について二度と考えません。 ただし、フォーマットをニーズに合わせるために時間をかけると、すべての画面で見事に見える詳細で鮮明な画像が得られます。

この投稿では、ScalableVectorGraphicsに関する多くの情報を提供してきました。 CSSを使用して画像をニーズに適合させ、操作の範囲はPNGやJPEGよりもはるかに大きくなります。 また、軽量であるため、小さな画面や貧弱なインターネット接続に最適です。

WebサイトでScalableVectorGraphicsを使用しますか？使用する場合、この記事は役に立ちますか？ 以下のコメントセクションでお知らせください。

画像クレジット：GDJ。