SVGとPNGの比較
PNGはデコード後の画素を可逆圧縮で保持し、アルファチャンネルも格納できます。透過画像やスクリーンショットに適していますが、編集可能な文書のレイヤーやカメラのセンサーデータは保持できず、写真ではファイルが大きくなることがあります。
SVGから変換
SVG画像の変換先の形式を選択します。
JPEGJPEGSVG → JPEGPNGPNGSVG → PNGWebPWebPSVG → WebPAVIFAVIFSVG → AVIFHEICHEICSVG → HEICHEIFHEIFSVG → HEIF
すべての変換（22）
印の付いた変換では、レイヤーの統合、ラスタライズ、トーンマッピング、アニメーションの消失などが生じる場合があります。
SVGに変換
SVGに変換する元の形式を選択します。
JPEGJPEGJPEG → SVG制限ありPNGPNGPNG → SVG制限ありWebPWebPWebP → SVG制限ありAVIFAVIFAVIF → SVG制限ありHEICHEICHEIC → SVG制限ありHEIFHEIFHEIF → SVG制限あり
すべての変換（39）
GIFGIFGIF → SVG制限ありTIFFTIFFTIFF → SVG制限ありBMPBMPBMP → SVG制限ありICOICOICO → SVG制限ありJPEG XLJPEG XLJPEG XL → SVG制限ありJPEG 2000JPEG 2000JPEG 2000 → SVG制限ありQOIQOIQOI → SVG制限ありTGATGATGA → SVG制限ありPCXPCXPCX → SVG制限ありPPMPPMPPM → SVG制限ありPGMPGMPGM → SVG制限ありPBMPBMPBM → SVG制限ありPAMPAMPAM → SVG制限ありHDRHDRHDR → SVG制限ありEXREXREXR → SVG制限ありPSDPSDPSD → SVG制限ありPDFPDFPDF → SVG制限ありDNGDNGDNG → SVG制限ありCanon CR2Canon CR2Canon CR2 → SVG制限ありCanon CR3Canon CR3Canon CR3 → SVG制限ありCanon CRWCanon CRWCanon CRW → SVG制限ありNikon NEFNikon NEFNikon NEF → SVG制限ありSony ARWSony ARWSony ARW → SVG制限ありFujifilm RAFFujifilm RAFFujifilm RAF → SVG制限ありOlympus ORFOlympus ORFOlympus ORF → SVG制限ありPanasonic RW2Panasonic RW2Panasonic RW2 → SVG制限ありPentax PEFPentax PEFPentax PEF → SVG制限ありSigma X3FSigma X3FSigma X3F → SVG制限ありKodak RAWKodak RAWKodak RAW → SVG制限ありHasselblad 3FRHasselblad 3FRHasselblad 3FR → SVG制限ありCDRCDRCDR → SVG制限ありDWGBETADWGDWG → SVG制限ありDXFDXFDXF → SVG制限あり
印の付いた変換では、レイヤーの統合、ラスタライズ、トーンマッピング、アニメーションの消失などが生じる場合があります。
SVGについて
Scalable Vector Graphics
SVGは、2次元の画像をXMLで記述するW3Cの言語です。固定の画素配列だけを記録するのではなく、パス、図形、テキスト、グラデーション、変形によって画像の描き方を定義します。図表、画面の記号、イラストなど、さまざまな大きさで表示する画像に適しています。
不透明度、クリッピング、マスクを組み合わせて透明部分を表現できます。SVGはラスター画像、フォント、スタイル、外部リソースも参照できるため、こうした依存関係が移植性に影響します。適切な環境ではアニメーションや対話的なスクリプトも使用できますが、静止画像として読み込む場合は、より制限された処理モードで動作することがあります。
拡大縮小しても輪郭をきれいに保ちたい図表、ロゴ、記号にSVGを使えます。SVGに埋め込んだ写真はラスター画像のままで、ベクターの細部が追加されるわけではありません。PNGやJPEGに書き出す際は、画像サイズ、フォント、背景を適切に選択してください。描画すると、ベクター、テキスト、アニメーションの情報が画素に固定されます。
主な特性
SVGは、非可逆・可逆の画素コーデックではなく、形状を記述します。XMLは転送用に圧縮できますが、ラスタライズは別の処理です。画像サイズが固定され、編集性が失われる場合があります。
SVGの歴史
SVGは構造化されたウェブ画像のW3C仕様として発展し、後の改訂でウェブプラットフォームの機能との連携が強化されました。
SVGとほかの形式の比較
形式ごとに利点と制約が異なります。画像と作業の目的に合わせて選択してください。
SVGとPDFの比較
PDFは文字、ベクターパス、ラスター画像を組み合わせたページの記述を保持します。レイアウトが固定された文書に適しています。画像の抽出やページのラスタライズには、ページ、解像度、色の処理方法を選ぶ必要があります。
SVGとWebPの比較
WebPは8ビット画像の非可逆・可逆圧縮に、アルファチャンネルとアニメーションを組み合わせた形式です。これらの機能を必要とするウェブ配信に適しています。高精度の画素値や編集可能な元データの構造には、別の作業用形式が必要です。
SVGとICOの比較
ICOは複数のサイズのアイコンを一つのリソースにまとめます。Windowsのアプリケーションアイコンや対応するファビコンに適しています。一枚の原寸画像には一般的な画像形式の方が扱いやすく、アイコンの書き出しではサイズを適切に選ぶ必要があります。
SVGについてのよくある質問
この形式には何が保存されますか？
SVGは、2次元の画像をXMLで記述するW3Cの言語です。固定の画素配列だけを記録するのではなく、パス、図形、テキスト、グラデーション、変形によって画像の描き方を定義します。図表、画面の記号、イラストなど、さまざまな大きさで表示する画像に適しています。
圧縮は画質にどう影響しますか？
SVGは、非可逆・可逆の画素コーデックではなく、形状を記述します。XMLは転送用に圧縮できますが、ラスタライズは別の処理です。画像サイズが固定され、編集性が失われる場合があります。
写真をSVGに変換すると自由に拡大できますか？
写真を埋め込むだけでは、ラスター画素をSVGに格納するだけです。パスの再構築には別途トレース処理が必要で、あらゆる写真の細部を正確に再現することはできません。
ファイルを開く前に何を確認すればよいですか？
フォント、リンク画像、フィルター、処理モードを確認してください。対話的なSVGを単体で開く場合と、同じファイルを画像要素で表示する場合では、利用できる機能が異なることがあります。
別の形式に書き出すと何が変わりますか？
ラスター画像への書き出しでは、出力の画像サイズと静止状態を選択します。パスと編集可能なテキストは失われ、JPEGでは透明部分も背景に合成されます。埋め込みラスター画像の細部には限界があり、拡大しても新しい情報は増えません。
この形式はどのような用途に適していますか？
拡大縮小しても輪郭をきれいに保ちたい図表、ロゴ、記号にSVGを使えます。SVGに埋め込んだ写真はラスター画像のままで、ベクターの細部が追加されるわけではありません。PNGやJPEGに書き出す際は、画像サイズ、フォント、背景を適切に選択してください。描画すると、ベクター、テキスト、アニメーションの情報が画素に固定されます。
参考資料
- W3C — SVG 2 specification
- W3C — SVG 1.1 Second Edition (2011)
- IANA — media type registry
- W3C — PNG Third Edition (2025)
- PDF Association — ISO 32000-2 specification
- Google — WebP container specification
- Google — WebP compression techniques
- Microsoft — ICON resources
- Microsoft — Windows icon formats and colour depths