SVGベクターからPNG画像へのコンバーター
SVGベクターファイルをPNGラスター画像に変換することで、スケーラブルなコードベースのグラフィックスを、あらゆるアプリケーションに対応する固定ピクセルグリッドへと変換します。
フォーマットの比較と技術仕様
| 仕様 | SVG | PNG |
|---|---|---|
| MIMEタイプ | image/svg+xml | image/png |
| タイプ | vector | raster |
| 圧縮 | lossless XML text (GZIP compressible via .svgz) | lossless (DEFLATE / LZ77 + Huffman) |
| 標準仕様 | W3C SVG 2 Specification | W3C PNG 3rd Edition |
| マジックバイトヘッダー | 3C 3F 78 6D 6C (<?xml) or 3C 73 76 67 (<svg) | 89 50 4E 47 0D 0A 1A 0A |
フォーマットの概要と用途
スケーラブル・ベクター・グラフィックス(SVG)は、XMLテキストコードを使用して画面上に幾何学的パス、線、図形を直接描画します。この形式は、どのような画面サイズでもアートワークがシャープさを保つため、Webロゴやアイコンに最適です。しかし、古いソフトウェアや厳格な電子メールクライアント、特定の印刷ツールの中には、ベクターコードを読み取れないものがあります。ファイルをPNG(Portable Network Graphics)形式に変換すると、ベクター形状が色付きピクセルの固定グリッドに描画され、この問題が解決します。 Web開発者やグラフィックデザイナーは、モバイルアプリストアやレガシーなプラットフォーム用のアイコンを準備する際、この変換を頻繁に行います。アプリストアでは、アプリケーションアイコンに特定のラスター寸法が求められます。ベクターソースを固定画像グリッドに変更することで、ターゲットアプリケーションによるXMLコードの解析に依存せず、すべてのデバイスでグラフィックが正しく表示されるようになります。
技術仕様とコーデックの内訳
SVGファイルはMIMEタイプとして「image/svg+xml」を使用し、マークアップ括弧で囲まれたプレーンテキストのXMLタグで構成されています。人間が読めるテキスト文書であるため、マジックバイトは使用しません。PNGファイルはMIMEタイプとして「image/png」を使用し、「89 50 4E 47 0D 0A 1A 0A」という正確な8バイトのマジックシグネチャで始まります。構造的に、SVGは数学的なパスの指示と座標に依存しています。一方、PNGは、LZ77スライディング辞書マッチングとハフマン符号化を組み合わせたDEFLATEアルゴリズムを使用して圧縮されたピクセルのラスターグリッドに依存し、ロスレス(可逆)圧縮を実現しています。
OSとブラウザの互換性
SVGファイルはChrome、Safari、Firefox、Edgeなどのすべての近代的なWebブラウザでネイティブに開くことができますが、Microsoft Officeのレガシーバージョンなどの古いデスクトップソフトウェアではサポートされていません。PNG画像は、Windows、macOS、Linux、iOS、Androidを含むすべての主要なオペレーティングシステムで普遍的な互換性を誇ります。すべての近代的なWebブラウザ、画像ビューア、オフィススイートは、追加のプラグインなしでPNGファイルを開くことができます。
💡 役立つ情報
ベクターをラスターに変換する際は、最終的な表示ターゲットに一致する解像度サイズを選択してください。2倍の寸法で書き出すと、高密度なRetinaディスプレイ向けにシャープな画像を作成できます。
フォーマットの比較と技術仕様
一般的なロゴのベクターファイルは約15 KBです。これを高解像度のPNGに変換すると、約250 KBのファイルになります。高速な光回線接続では、このファイルは1ミリ秒未満で転送されます。5Gモバイル接続では約2ミリ秒、標準的な4Gネットワークではおよそ10ミリ秒で転送が完了します。
よくある質問
品質を落とさずにSVGベクターをPNG画像に変換するにはどうすればよいですか?
出力のシャープさを維持するには、PNGファイルで使用されるロスレスのDEFLATE圧縮を適用する前に、ベクターの数学的計算を高ピクセル寸法でレンダリングします。両方の形式がロスレスであるため、生成されたサイズを超えて最終的なピクセルグリッドを拡大しない限り、変換によってすべてのシャープなエッジと色彩が正確に保持されます。
SVGベクターとPNG画像の違いは何ですか?
SVGは、ピクセル化することなく無限に拡大縮小できるXMLテキストの指示から構築されたベクター形式です。PNGは、個々のカラーピクセルの固定グリッドから構築されたラスター形式です。ベクターはサイズ変更やレスポンシブWebデザインに最も適しており、ラスターは複雑な写真のテクスチャや普遍的なソフトウェア互換性に最も適しています。