SVG ファイルの解像度は?

公開: 2023-02-09

SVG (スケーラブルベクターグラフィックス) ファイルは、品質を損なうことなくサイズを変更できる画像です。これにより、画像をさまざまなサイズで表示する必要がある Web での使用に最適です。 SVG ファイルの解像度はどうあるべきかという質問に対する決定的な答えはありません。ただし、従うことができる一般的なガイドラインがいくつかあります。ほとんどの Web アプリケーションでは、1 インチあたり 72 ピクセルが適切な出発点です。この解像度は、必要に応じて画像のサイズを変更できるようにしながら、適切なレベルの詳細を提供します。より高いレベルの詳細を提供する必要がある場合は、解像度を 150 または 300 ピクセル/インチまで上げることができます。ただし、解像度を高くするとファイルサイズが大きくなることに注意してください。一般に、必要な詳細レベルを提供しながら、SVG ファイルの解像度をできるだけ低く保つことが最善です。これにより、ファイルサイズが最小化され、必要に応じて画像のサイズを変更しやすくなります。

ベクターグラフィックスに関して言えば、パス、形状、フォント、色など、いくつかの基本的なプロパティを定義するために XML が使用されます。次のユースケースの例を検討してください: UI およびナビゲーションアイコン、ベクターイラスト、パターン、繰り返し背景。次の例では、SVG が通常のラスターイメージをシームレスに置き換える方法を示します。その結果、最新のユーザーインターフェイスに搭載されているような、シンプルなイラスト付きのアイコンが非常に便利になります。画像は概念を明確に示しますが、テキストはあいまいになる可能性があります。最近のデバイスは、CSS ピクセル単位をデバイスピクセルに変換できません。代わりに、倍増します。同様に、画像はすでにラスター化されているため、ピクセルを 2 倍にしてもあまり意味がありません。

ユーザーは、Web サイトが小さすぎて好みに合わない場合、ズームインします。任意の倍率レベルで事前にラスタライズされた画像を提供することは不可能です。まだプロトタイプをお持ちでない場合は、例に動的グラフィックを追加する方法を示します。多くのユーザーはズームインしますが、ページ要素が固定サイズで表示されるため、ブラウザーの便利な機能を使用することもできません。スケーラブルなグラフィックは、任意の解像度と倍率レベルでラスタライズでき、すべてのデバイスで完全に機能します。相対サイズを使用すると、ユーザーはズームホイールを使用しなくてもレスポンシブデザインを引き続き体験できます。さらに、ブラウザのデフォルトのフォントサイズを使用して、デザインがデフォルトのサイズに適応できるようにしています。

ほとんどの実用的な目的で、SVG は CSS 背景および HTML 要素の他の画像を置き換えます。 IE のみのスタイルを使用する場合、サポートされている形式 (PNG など) の 2 番目の CSS 背景画像を使用できます。ソース画像が変更されると、画像内のコンテンツも更新される場合があります。 SVG サポートが存在する場合にのみ、SVG サポートを検出して使用することをお勧めします。 PNG や JPG などの生の画像形式の大部分は、すでに最大限に圧縮されています。圧縮とデコードの後、ラスターイメージをピクセル単位でレンダリングできます。 ベクトルグラフィックを表示するたびに、特定の解像度にラスタライズする必要があります。

ビジュアルスタイルのスケーラビリティを維持し、ラスターイメージを回避することは、ラスターイメージを回避する上で最も重要な側面です。 ベクターアイコンは、アクセシビリティとセマンティックの互換性の両方の観点から、そっくりな Unicode グリフに置き換えることができます。ウェブサイトを可能な限りレスポンシブにすることが重要だと思います。デバイスにとらわれないようにするためにできることが多ければ多いほど、より良い結果が得られます。

画質を損なうことなく SVG ファイルのサイズを任意のサイズに変更できる機能は、独自の機能です。 SVG ファイルのサイズは問題ではありません。サイト上でサイズが大きくても小さくても同じように表示されるからです。スケーラビリティの鍵は、それが継続的であることを保証することです。

Svg ファイルの解像度は?

SVG ファイルの解像度は通常 72 dpi で、これはほとんどのコンピューター画面の解像度です。ただし、SVG はベクター形式であるため、品質を損なうことなく任意のサイズにスケーリングできます。

Svg 画像の多くの利点

画面の解像度やサイズに関係なく、使用しているサイズや解像度に関係なく、以前と同じファイルを表示できます。

Svg ファイルは高解像度ですか?

高品質のデジタルロゴやグラフィックを使用している場合は、PNG または .VG ファイルとして保存することをお勧めします。どちらも大容量ながら解像度が高く、さまざまなシーンで活用できます。

ベクターベースの形式はベクターグラフィックスと呼ばれ、品質を損なうことなく縮小または拡大できます。これにより、ラスターデータに基づく PNG や JPEG などのファイルタイプよりもはるかに優れています。 SVG ファイルは、ラスターイメージよりもはるかに軽く、イメージの品質とサイズを処理する必要がありません。 HTML5 SVG 形式はテキストに基づいているため、検索エンジンは画像の読み取り、クロール、インデックス作成をより迅速かつ簡単に行うことができます。検索エンジンは、タイトル、キーワード、ALT などのメタデータに基づいてラスターイメージしか認識できないため、結果として、この点で、SVG の利点は PNG や JPEG の利点を上回ります。 Be Yours などの一部の Shopify テーマでは、SVG のみを使用するセクションまたはブロックを追加できます。

これが発生すると、ギザギザのエッジやぼやけた画像などのアーティファクトが表示される場合があります。つまり、Web サイトで使用するために SVG を作成した場合、ブラウザーは単純にそれをラスターイメージとして表示するので、これはそれほど問題ではありません。ただし、印刷用の SVG を作成するときは、これを考慮する必要があります。幸いなことに、いくつかの解決策があります。たとえば、gzip などのロスレス圧縮ツールを使用すると、必要以上の解像度で SVG を作成するときにファイルサイズを小さくすることができます。もう 1 つの方法は、解像度ベースの SVG を使用することです。パラメータで指定されている場合、SVG は特定の解像度でレンダリングされます。 SVG は、電話などのモバイルデバイスでの使用のみを目的としている場合にのみ作成できます。さらに、印刷用の SVG を作成している場合は、それを使用できます。ファイルサイズが小さくなるだけでなく、解像度に依存しない SVG はファイルサイズが大きくなります。 Web で使用する場合は、高品質の画像を選択する必要があります。印刷物で SVG を使用するために、解像度に依存する SVG を使用する必要があるかどうかを検討することをお勧めします。