PNGをSVGに変換
レスポンシブなWebスケーリングとベクター互換のレイアウト統合のため、ラスターPNG画像をSVG XMLベクターコンテナ内にカプセル化します。
フォーマットの比較と技術仕様
| 仕様 | PNG | SVG |
|---|---|---|
| MIMEタイプ | image/ | image/ |
| タイプ | ラスター | ベクター |
| 圧縮 | ロスレス（DEFLATE / LZ77 + ハフマン符号） | ロスレスXMLテキスト（.svgzによりGZIP圧縮可能） |
| 標準仕様 | W3C PNG 第3版 | W3C SVG 2 仕様書 |
| マジックバイトヘッダー | 89 50 4E 47 0D 0A 1A 0A | 3C 3F 78 6D 6C (<?xml) or 3C 73 76 67 (<svg) |
フォーマットの概要と用途
PNGファイルをSVG形式に変換すると、ラスタービットマップがXMLベクターコンテナ内にラップされ、Web開発者やグラフィックデザイナーはスケーラブルなベクターワークフロー内にラスターグラフィックスを直接埋め込むことができるようになります。ラスターPNG画像は、色付きピクセルの固定グリッドを使用します。このグラフィックをSVGファイルにラップすることで、元のピクセル寸法と透明度を維持しながら、SVG駆動のWebレイアウトやレスポンシブUIビューポート内に画像を直接埋め込むことが可能になります。 Webデザイナーは、個別の外部画像ファイルを管理することなく、ラスターアートワークをSVGスプライトシート、ベクターイラストレーションワークフロー、レスポンシブWebサイトに統合するために、この変換を頻繁に行います。結果として得られるSVGは、標準的なXMLマークアップ内にグラフィック全体を自己完結型としてパッケージ化します。
技術仕様とコーデックの詳細
PNGファイルは、MIMEタイプ image/png を持つラスター画像です。マジックバイトヘッダー 89 50 4E 47 0D 0A 1A 0A で始まり、その後にLZ77スライディング辞書とハフマン符号化を組み合わせたDEFLATEアルゴリズムで圧縮されたデータチャンクが続きます。対照的に、SVGファイルはMIMEタイプ image/svg+xml を使用し、XMLドキュメントとして構造化されています。変換中、エンジンはクライアントメモリ内で画像をラスタライズし、ビットマップをPNGにシリアライズし、SVGの <image> コンテナ要素内にBase64データURIとして画像を埋め込みます。これにより、定義されたviewBox寸法を持つ、有効で自己完結型のSVGファイルにグラフィックがパッケージ化されます。
OSとブラウザの互換性
SVGファイルは、Windows、macOS、Android、iOSなどのデスクトップおよびモバイルオペレーティングシステム上の、Chrome、Firefox、Safari、Edgeなどの最新のWebブラウザで広くサポートされています。Adobe Illustrator、Inkscape、CorelDRAWなどの画像ビューアやデザインスイートは、SVGの編集をネイティブで処理します。PNGファイルも同様に、ブラウザやオペレーティングシステムで広くサポートされていますが、生のSVGマークアップを表示するには、任意の標準的なテキストエディタが必要です。
役立つ情報
この変換では、ベクターパスをトレースするのではなくラスタービットマップをXMLコンテナに埋め込むため、グラフィックは正確なピクセル詳細とアルファ透明度を保持しつつ、SVGレンダラーとの完全な互換性を維持します。
よくある質問
品質を落とさずにPNG画像をSVGベクターに変換するにはどうすればよいですか？
このコンバーターはフル解像度のPNGビットマップ全体を、埋め込みBase64データストリームとしてSVG XMLのラッパー内に格納します。これにより、非可逆圧縮を使わずにピクセルの色と透明度を維持します。
PNG画像とSVGベクターの違いは何ですか？
PNGは、視覚データをDEFLATEで圧縮された色付きピクセルの固定グリッドとして保存するラスター画像形式であり、ファイルサイズはピクセル寸法に依存します。SVGは、視覚データをXMLテキストで記述されたスケーラブルな数学的命令として保存するベクター画像形式であり、画質を落とすことなく画像を無限にリサイズできます。