このブログをスタイリッシュに始めるために、PNGイメージをSVG形式に変換するという興味深い試みがあります（ベクトル化）。
さて、少し実験してみましょう。こちらはパイナップルの写真です：
いくつかの変更が見られます：
- 画像はより単純化され、詳細が少なくなりました。
- リアルな写真よりもアートワークに似ています。
フードの下で大きな変化が起こりました。画像はもはや小さなピクセル（小さな四角形）で構成されていません。それはXML形式のコードから生成されています。
これはどういうことか知っていますか？楽しくて子供っぽいトリックができます。
たとえば、Notepadなどのテキストエディタでコードを表示し、いくつかのコード行を削除できます。
上記の画像では、いくつかのコード行がなくなりました（ずる賢く笑う）。これによりいくつかの白いスペースが生まれました。
これで十分に興味を引かれたはずです。それでは、これでPNGとSVGの2つの形式について詳しく見ていきましょう。
目次
PNGとは？
PNGはPortable Network Graphicの略で、これはJPEGと同じくらいラスター画像ファイルです。基本的に、画像は2次元のグリッドに列と行がある小さな四角形のピクセルで構成されています。
ピクセルはキャンバス上の単一の色の点のようなものです。それはコンピュータがその小さな四角形をどのように表示するかを定義するデジタルの数値カラーデータを含んでいます。多くのピクセルが全体の画像を作り出します。
ラスタータイプの画像は解像度に依存しています。ピクセルの数が固定されており、したがって一定の情報しかありません。
画像の初期寸法を超えて画像を拡大すると、新しい情報は追加されません。したがって、小さなピクセルがより見えやすくなり、画像がクリアさを失います。
そのため、PNG画像を拡大する際には、リサンプリングなどの手法が適用され、リサイズ中に新しい情報を追加します。
圧縮はPNG画像のリサイズと同じですか？
PNGファイルの大きな利点の一つは、ロスレスな圧縮アルゴリズムを使用していることです。これはデータが圧縮プロセス中に失われないことを意味します。したがって、ファイルサイズが縮小された後でもデータを復元できます。
ただし、圧縮はファイルサイズを縮小してストレージのスペースを節約する行為です。これは画像の寸法を変更することとは異なり、画像の品質に影響します。たとえば、以下は約2500pxの幅で元のPNG画像で、100%のズームで表示されたものです。
2番目の画像は、画像のサイズを641pxに縮小し、再び2500pxに拡大した後の品質低下を示しています。
画像は鮮明ではありません。多くの詳細が永遠に失われてしまいました。
PNGはどのように使用されるか？
PNG画像は以下の用途に適しています：
スクリーンショットやテキストを含む画像の保存
PNGはテキストを含む画像を保存するのに適しており、そのフォーマットはJPGと比較されることがよくあります。
ロゴ
PNGは透明性をサポートしており、透明な背景が必要なロゴやその他のウェブグラフィックに適しています。JPGで透明性を描こうとすると、白い背景が表示されます。
高品質の画像の展示
PNGは最大1680万色までレンダリングできるため、高品質のデジタル画像を表示できます。写真には向いていますが、Unsplashなどのストック写真サイトでもあまり人気がありません。PNG画像はファイルサイズが大きいためです。したがって、人々は人物、場所、物の写真には一般的にJPG形式を使用し、またはPNGをJPGに変換します。JPGの方がサイズが小さく、読み込みが速いためです。
ウェブグラフィックス、チャート、イラスト
PNGは線画、描画、漫画、図面、建築プラン、チャートなどのために優れたパフォーマンスを提供します。画像を写真編集ツールで何度も見て保存しても、線は鮮明なままです。
| PNGの利点 | PNGの欠点 |
|---|---|
| ロスレス圧縮 | ファイルサイズが大きい |
| 透明性をサポート | アニメーションをサポートしていない |
| 明瞭でリアルで高品質の画像 | 無限に拡大することなく画像品質が低下する |
SVGとは？
SVGはScalable Vector Graphicsの略で、JPGやPNGなどのラスターフォーマットとは異なる大きな方法があります。画像を構築するために静的なピクセルではなく、要素と属性がXMLファイルから生成されるという点です。
このファイル形式には次の特性があります：
- 属性と要素はアニメーションできます。
- SVGファイルはテキストエディタで編集または作成できます。
- ファイルはいかなるサイズでも品質に影響を与えずにレンダリングできます。
- ファイルは純粋にXMLで書かれています。
- 画像にはグラフィックソフトウェアなしに編集できるテキストが含まれており、画像のローカライズやパーソナライズが容易です。
SVGファイルはどのように動作するのか？
SVGは、ベクターベースのグラフィックを定義するためにXML（テキストベースのマークアップ言語）を使用します。これにより、各ベクターポイントの構築、描画、レイアウト方法が指定されます。
基本的なSVG画像は、<svg>要素で始まり、</svg>のクロージングタグで終わります。ルート要素には幅や高さなど、グリッドのサイズを指定するさまざまな属性があります。
その他の一般的な要素には次のものがあります：
<circle>：円を描画し、”cx”や”cy”といった属性を使用して円の中心座標を定義し、”r”で半径を定義し、”stroke”でストロークの色を定義します。<line>：2つのポイントを結ぶ線を作成します。”stroke”を色を定義するために使用し、”x1″と”y1″を始点を定義するために使用します。<pattern>：グラフィックオブジェクトを領域全体にタイル状に配置してパターンを生成します。
SVGファイルがどのように動作するかを理解するために、2つの簡単な例を見てみましょう。
#1：次のスクリーンショットは、SVGで単純な円を描画する方法を示しています。この例はW3Schoolsで見つけることができ、SVGグラフィックファイルの書き方を学び、実践できます。
#2：2番目の例では、パターンを作成する方法を示しています。最初に多角形（星）を構築して、領域全体に埋めます。
この例やSVGの要素についての詳細は、MozillaのSVGガイドから学ぶことができます。
SVGは何に使用されるのか？
SVGファイルの主な用途は、画像を品質を損なわずにリサイズできる能力から生まれています。SVGは透明性もサポートできます。そこで、SVGファイルの主要な利用ケースをいくつか紹介します。
ウェブサイトのグラフィカル要素：アイコン、ボタン、ロゴなど
このフォーマットは、ウェブサイトのボタン、アイコン、ロゴを品質に影響を与えずに、異なる画面サイズで一貫して表示するのに便利です。
SEOに優しいインフォグラフィックやイラストの作成
SVGファイルはテキストベースなので、Googleなどの検索エンジンはインフォグラフィックやイラストに含まれるテキストをクロールしてインデックス化できます。これにより、画像に重要なキーワードが含まれていれば、エンジンのランキングが向上する可能性があります。
2次元アニメーションの作成
要素で見られる属性を何らかの方法でアニメーション化することができ、デザイナーは興味深いエフェクトを作成できます。
SVG画像でリアルな画像を作成できるか？
超リアルなSVG画像を再現するのは難しいです。なぜなら、画像は線、点、要素を使用して作成されており、複雑な画像は多くの行のコードを持つファイルになります。ファイルサイズは同様のラスターファイル画像よりも大きくなる可能性があります。
Mark Gossageによるこのイラストは、SVG画像がどれほどリアルになるかを示しています。
ラスターファイルをSVGに変換すると何が起こるか？
変換中に、グリッド上の固定ピクセルはベクター（データのポイント）と複雑な数学的な式に関連する要素に変換されなければなりません。変換ソフトウェアは単にピクセルをそのまま変換することはできません。画像を再トレースし、形状やテクスチャを定義する色の遷移（エッジ）を探し出さなければなりません。
ソフトウェアは、オブジェクトがはっきりした線やエッジを持っていない場合、オブジェクトを正確にトレースするのに苦労するかもしれません。
これを示す2つの並べて表示された例があります。
| before | after |
 |  |
1つ目の例では画像にはっきりとした遷移がなく、コンバーターはオブジェクトとその背景を正確にトレースするのに苦労しています。
2つ目の例では、画像にはっきりとしたエッジと大胆な対照的な色があります。コンバーターは背景と主題を正確にトレースするのが簡単です。一部の詳細が欠けていても、結果はかなり素晴らしいです。
得られる結果は画像コンバーターに依存します。AdobeのSVGコンバーターなどの高度なツールは、よりリアルな画像を生成するために芸術的な効果を適用します。
| SVGの利点 | SVGの欠点 |
|---|---|
| スケーラブルでズーム可能 | 高度な詳細をサポートしていない |
| リサイズやズーム時に品質が損なわれない | レガシーブラウザでは動作しないかもしれない |
| 検索可能でインデックス可能 | グラフィック、ロゴ、イラストにのみ適している |
SVGをPNGよりも使用する5つの理由
SVGやPNGを使用する状況はいくつかあります。これらは主に以下の場合に発生します：
- ロゴとウェブアイコン
- グラフィック、チャート、およびイラスト
以下の場合、SVGをPNGよりも使う理由は何でしょうか：
1. 解像度
SVGはXMLコードから構築されているため、解像度に独立しています。画像は表示される解像度に関係なくその品質を保持します。
2. 速さ
ウェブサイトでSVGは高速でパフォーマンスが向上します。これは主に2つの理由によるものです。
- サーバーリクエストの削減： SVGは画像ファイルを読み込むためのサーバーリクエストの数を減らします。画像はHTMLコードの一部として読み込まれます。PNG画像の場合、ページはサーバーへの繰り返しのリクエストを行います。
- ファイルサイズの縮小： SVGはPNGよりも小さいサイズを生成できます。これは一般的にチャート、グラフィック、ロゴに適しています。ただし、高度で詳細なリアルな画像には適用されないかもしれません。ファイルサイズが小さいほど、SVG画像の読み込み時間が短縮され、SEOのパフォーマンスが向上します。
3. アニメーション
SVGにはさまざまな要素（<animate>、<animate motion>、<animateTransform>など）を使用してアニメーションを付けることができます。同様にCSSを使用してSVGにアニメーションを付けることも可能です。
4. 実用性
XML形式のSVGは非常に実用的です。画像はスクリプトで制御でき、ベクター編集プログラムによって簡単に変更できます。
5. 可読性とSEO
SVGはテキスト要素を使用してキャンバス上にテキスト文字列をレンダリングします。このテキストは検索エンジンのクローラーに見えます。クローラーは画像を正しくインデックス化し、ラベルを付けることができ、可視性が向上します。PNG画像の場合、クローラーは画像の意味を文脈から理解しなければなりません。そのため、PNGはSVGほどSEOに優れていません。
PNGをSVGよりも使う理由は何ですか？
PNGを使う理由にはいくつかあります：
- 互換性： PNGはレガシーブラウザと互換性があります。
- 編集のしやすさ： PNG画像の表示および基本的な編集を行うための多くのツールがあります。SVGは視覚的な編集にAdobe Illustratorなどのベクターベースのエディタが必要です。基本的な編集（色の変更やドロップシャドウの追加など）についてはMicrosoft Office Suiteを使用できます。
- 画像の品質の保持： 実際の画像を扱う場合、PNGを使用する必要があります。
- ソーシャルメディアの共有： FacebookやInstagramなどのソーシャルプラットフォームはSVGをサポートしていません。ソーシャルメディアでグラフィックやインフォグラフィックを共有するにはPNGを使用する必要があります。
- メールの署名： メールにSVGを埋め込むためのネイティブサポートはありません。メールの署名と添付ファイルには.pngを使用する必要があります。
結論：SVGとPNG、どちらがベストか？
これらのファイルフォーマットにはそれぞれ強みと弱点があります。基本的にはPNGがより柔軟で広くサポートされています。基本的な編集機能を実行するために特別なソフトウェアは必要ありません。画像はデバイスやOSに関係なく、すべてのブラウザと互換性があります。
PNGは透明な背景を必要とするイラスト、透明な背景を必要とするグラフィック、高品質の写真に適しています。ただし、PNGには1つの主要な制限があります。拡大やズーム時に画像の品質が劣化します。
SVG画像は解像度に独立しているため、品質が劣化せずに拡大できます。画像が表示される場所に関係なく一貫して表示されます。さらに、SEOに優れており、テキストが多いインフォグラフィックも簡単にインデックス化されます。
おすすめとして、パフォーマンスとスケーラビリティに主に関心がある場合は、グラフィック、チャート、ロゴ、アニメーション、またはイラストにはSVGファイルを使用できます。ただし、互換性と共有の容易さが主な懸念事項である場合は、PNGを使用することをお勧めします。
コメントを残す