PNG画像からSVGベクターへのコンバーター
PNGラスター画像をSVGベクターグラフィックに変換することで、品質を落とすことなく無限にサイズ変更できるようにピクセルグリッドをスケーラブルな数学的パスに変更します。
フォーマットの比較と技術仕様
| 仕様 | PNG | SVG |
|---|---|---|
| MIMEタイプ | image/png | image/svg+xml |
| タイプ | raster | vector |
| 圧縮 | lossless (DEFLATE / LZ77 + Huffman) | lossless XML text (GZIP compressible via .svgz) |
| 標準仕様 | W3C PNG 3rd Edition | W3C SVG 2 Specification |
| マジックバイトヘッダー | 89 50 4E 47 0D 0A 1A 0A | 3C 3F 78 6D 6C (<?xml) or 3C 73 76 67 (<svg) |
フォーマットの概要と用途
PNGファイルをSVG形式に変換することは、ロゴやアイコンをあらゆる画面サイズでシャープに見せる必要があるグラフィックデザイナーやWeb開発者にとって一般的な作業です。ラスター形式のPNG画像は、色付きピクセルの固定グリッドを使用しています。PNGを元の寸法を超えて引き伸ばすと、ピクセルがぼやけてブロック状に見えます。このラスターグラフィックをSVGファイルに変換すると、それらのピクセルが直線、曲線、図形の数学的指示に置き換えられます。これにより、アートワークの鮮明度を失うことなく、看板サイズからモバイルアイコンのサイズまで拡大縮小できるようになります。 Webデザイナーは、Webサイトのパフォーマンスと視覚的忠実度を向上させるために、この変換を頻繁に行います。SVGとして保存されたロゴやUIアイコンは、高解像度のRetinaディスプレイでシャープに読み込まれながら、ファイルサイズを驚くほど小さく保ちます。また、印刷所でも、ピクセルマトリックスではなく連続した線を必要とするカッティングプロッターやレーザー彫刻機用にアートワークを準備するためにベクター形式が活用されています。
技術仕様とコーデックの内訳
PNGファイルは、MIMEタイプ「image/png」を持つラスター画像です。マジックバイトヘッダー「89 50 4E 47 0D 0A 1A 0A」で始まり、その後にLZ77スライディング辞書とハフマン符号化を組み合わせてロスレス圧縮を行うDEFLATEアルゴリズムで圧縮されたデータチャンクが続きます。対照的に、SVGファイルは、MIMEタイプ「image/svg+xml」を持つベクターグラフィックです。XMLマークアップで記述されたプレーンテキストファイルであるため、マジックバイトは使用しません。SVGコードは、パス、円、長方形などの要素を使用して幾何学的形状を定義します。PNG圧縮がすべての個別のピクセルの色値を保存することでファイルサイズを縮小するのに対し、SVG圧縮は数学的数式を保存することでファイルサイズを縮小します。また、SVGはGZIP圧縮を使用してさらに圧縮することも可能であり、Web転送を効率化するためにファイル拡張子を「.svgz」に変更できます。
OSとブラウザの互換性
SVGファイルは、Windows、macOS、Android、iOSなどのデスクトップおよびモバイルオペレーティングシステム上の、Chrome、Firefox、Safari、Edgeなどの最新のWebブラウザで広くサポートされています。Adobe Illustrator、Inkscape、CorelDRAWなどの画像ビューアやデザインスイートは、SVGの編集をネイティブで処理します。PNGファイルも同様に、ブラウザやオペレーティングシステムで広くサポートされていますが、生のSVGマークアップを表示するには、任意の標準的なテキストエディタが必要です。
💡 役立つ情報
複雑な写真のPNGをSVGに変換すると、トレーシングアルゴリズムによって数千の小さなベクターパスが生成されるため、ファイルサイズが非常に大きくなることがよくあります。SVG変換はロゴ、アイコン、フラットグラフィック用にとどめ、写真はラスター形式のままにしておくことをお勧めします。
フォーマットの比較と技術仕様
複雑な高解像度のPNGロゴは簡単に2メガバイトに達し、標準的な4Gモバイル接続ではダウンロードに約3.2秒かかります。変換された同等のSVGファイルはわずか40キロバイトに縮小することが多く、4Gでは0.1秒未満、5Gや光回線では瞬時にダウンロードできます。
よくある質問
品質を落とさずにPNG画像をSVGベクターに変換するにはどうすればよいですか？
PNGからSVGへの変換では、ラスター形式のような従来の非可逆圧縮や可逆圧縮は使用されません。その代わり、コンバーターはPNGのピクセル境界をトレースし、数学的ベクターとして再描画します。ベクターはスケーラブルなパスを使用するため、無限の解像度品質が得られます。ただし、単純な自動トレースツールでは鋭い角が失われたり、細かいディテールが滑らかになったりすることがあるため、完璧な結果を得るためにはベクター編集ソフトウェアでの手動調整が必要になる場合があります。
PNG画像とSVGベクターの違いは何ですか？
PNGは、視覚データをDEFLATEで圧縮されたカラーピクセルの固定グリッドとして保存するラスター画像形式であり、ファイルサイズはピクセル寸法に依存します。SVGは、視覚データをXMLテキストで記述されたスケーラブルな数学的指示として保存するベクター画像形式であり、ピクセル化することなく画像を無限に拡大縮小できます。