SVGをPNGに変換
SVGベクターファイルをPNGラスター画像に変換することで、スケーラブルなコードベースのグラフィックスを、あらゆるアプリケーションに対応する固定ピクセルグリッドへと変換します。
フォーマットの比較と技術仕様
| 仕様 | SVG | PNG |
|---|---|---|
| MIMEタイプ | image/ | image/ |
| タイプ | ベクター | ラスター |
| 圧縮 | ロスレスXMLテキスト（.svgzによりGZIP圧縮可能） | ロスレス（DEFLATE / LZ77 + ハフマン符号） |
| 標準仕様 | W3C SVG 2 仕様書 | W3C PNG 第3版 |
| マジックバイトヘッダー | 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ファイルはほとんどの最新ブラウザーで開けますが、古いデスクトップソフトウェアでは対応していない場合があります。PNG画像は、主要なOS、ブラウザー、画像ビューアー、オフィススイートで幅広くサポートされています。
役立つ情報
このコンバーターはファイルに設定された幅と高さでSVGをレンダリングします。より大きく、Retinaディスプレイでも鮮明なPNGにするには、変換前にSVGの幅と高さを大きくしてください。
よくある質問
SVGベクターをPNG画像にラスタライズすると何が変わりますか？
SVGはベクター形式、PNGはラスター形式です。変換ではSVGを指定したピクセルサイズで描画します。PNGはそのピクセルを保持しますが、元のベクター画像は保持しません。
SVGベクターとPNG画像の違いは何ですか？
SVGは、ピクセル化することなく無限に拡大縮小できるXMLテキストの指示から構築されたベクター形式です。PNGは、個々のカラーピクセルの固定グリッドから構築されたラスター形式です。ベクターはサイズ変更やレスポンシブWebデザインに最も適しており、ラスターは複雑な写真のテクスチャや普遍的なソフトウェア互換性に最も適しています。