フォントを失わずにSVGをPNGに変換するにはどうすればよいですか？

SVGからPNGへの出力が宣言されたサイズの2倍になる理由と、ブラウザのサンドボックスがレンダリング中に外部フォントやリンクされた画像を静かに削除する理由。

August 9, 2026

SVGにはピクセルが含まれていません。それはXMLです：パス、塗り、viewBox、そしてファイルに実際には含まれていないフォントを指定する<text>要素があるかもしれません。PNGにラスタライズするということは、ピクセルグリッドを選択し、その形状を上に描画することを意味します。したがって、結果が気に入るかどうかは2つの要素によって決まります。要求したピクセル数と、描画中にレンダラーが読み込むことを許可されたものです。

私たちはそのレンダリングをブラウザ内で実行します。ファイルはblob URLに入り、<img>要素がそれを読み込み、ブラウザはそれをOffscreenCanvasに描画し、WebAssemblyエンコーダーがPNGを書き込みます。このアプリにはAPIルートやサーバーアクションがないため、未公開のロゴが誰かの一時バケットで削除のcronを待つことはありません。ほとんどのSVGからPNGへのコンバーターは最初にアップロードし、後でクリーンアップを約束します。私たちのものはバイトをどこにも送信しないため、これが私たちのプライバシーモデルの全体的なポイントです。

ブラウザがSVGをラスタライズするときに実際に何が起こるのですか？

あなたのSVGは<img>要素に渡され、その詳細がこのページの他のすべてを駆動します。画像として読み込まれたSVGは、スクリプトが実行されず、外部参照が取得されない制限された処理モードで実行されます。これはSVG 2準拠ルールによって定義された安全な処理モードです。読み込みが解決されると、drawImageを使用してOffscreenCanvasに描画し、ピクセルを読み戻し、@jsquash/pngでエンコードし、その後oxipngをレベル3でバイトに対して実行します。そのステップはロスレスです。アルファは全行程を通じて生き残るため、透明なロゴは透明のまま出力されます。

PNGの実際のサイズはどのくらいになりますか？

私たちのコンバーターはSVGの固有サイズの2倍でレンダリングします。500x500のSVGは1000x1000になります。この倍増は、無料でレティナグレードのファイルを提供し、正確なピクセル数を要求する仕様で人々がつまずく原因にもなります。ブラウザが全く使える固有サイズを報告しない場合、1024x1024を代わりに使用し、その後倍増するため、PNGは2048x2048になります。CSS Images仕様は、サイズが最初に欠落する理由をカバーしています：固有の幅や高さがない置き換え要素はデフォルトのオブジェクトサイズに戻り、viewBoxだけではサイズが付随しない比率を提供します。したがって、ルート<svg>にターゲットの半分の幅と高さを設定してください。256を入れて512を出力します。

なぜ私のテキストが間違ったフォントで出力されたのですか？

これは最も一般的な苦情であり、コンバーターのバグではありません。@font-faceルールが.woff2 URLを指している場合、それは外部参照としてカウントされるため、安全なモードはそれが開始する前にその取得をブロックします。画像の周りのページで読み込まれたフォントも内部には到達しません。なぜなら、<img>内のSVGは独自のフォント解決を行う別のドキュメントだからです。得られるのは、フォントファミリーリストからマシンが一致できるものです。レビュアーのラップトップでは、選択していないフォールバックになります。修正は、テキストをテキストとして送信しないことです。Illustratorでは「タイプ > アウトラインを作成」と呼ばれ、Inkscapeでは「パス > パスに変換」と呼ばれます。どちらもすべてのグリフをパスに変換し、ファイルは少し大きくなり、レンダリングはマシンに依存しなくなります。

なぜ私のSVGの中の写真が欠けているのですか？

同じルール、異なる症状です。SVGが絶対的なhttps URLを持つ<image>要素を通じてビットマップを引き込む場合、そのURLは取得されず、PNGには写真があるべき場所に穴が開いて戻ります。data: URIは問題なく機能します。なぜなら、ブロックされるネットワークリクエストがないからです。埋め込む理由がもう一つあります：クロスオリジンのビットマップがキャンバスに描画されると、それは汚染され、その後ピクセルを読み戻すとSecurityErrorが発生します。その失敗は少なくとも自らを告知します。ブロックされた参照は静かで、これが人々に午後を失わせる原因です。変換する前にテキストエディタでファイルを開き、httpを検索してください。

PNGを再びSVGに変換できますか？

いいえ、そして私たちはそれ以外のことを装いません。私たちのコンバーターはSVGをデコードし、エンコードすることはできません：ビルド内のエンコーダーはJPEG、PNG、WebP、AVIF、PDFを書き込み、11のフォーマットにわたる24のペアの中にSVGをターゲットとするものはありません。ピクセルからパスに戻ることはトレースであり、マシンがエッジがどこに属するかを推測することです。トレースされたワードマークは出荷するには十分に近いことはめったにありません。元のファイルがまだある場合は、再エクスポートしてください。本当に必要なのが大きなサイズのラスタである場合、私たちのアップスケーラーはReal-ESRGANを実行し、常にPNGを書き込みます：400x269のファイルを4倍で1600x1076にしました。

SVGをファビコンセットに変換するにはどうすればよいですか？

アイコンジェネレーターはSVGを直接受け取りますが、コンプレッサー、リサイズおよびクロッパーは受け取りません：これらの3つはJPEG、PNG、WebP、AVIF、GIFのみを受け入れます。あなたのSVGをその2つの次元の大きい方、または512ピクセルの正方形のキャンバスにレンダリングします。どちらが勝つかにかかわらず、64x64のアイコンでも512のキャンバスからダウンサンプルされます。出てくるのは7つのファイルです：favicon.icoが16、32、48をパッキングし、favicon-16x16.png、favicon-32x32.png、180pxのapple-touch-icon.png、android-chrome-192x192.png、android-chrome-512x512.png、site.webmanifestです。なぜその1つの.icoが4.6 KBを稼ぐのかは別の議論です。1回に1ファイル、10 MBの上限。 コンバーターはバッチツールです：1回に10ファイルと50 MB。

PNGをその後圧縮すべきですか？

通常はそうです。モードはスライダーよりも重要です。900x606の942.4 KBの透明PNGで、ロスレスパス（oxipngレベル3）は383.9 KBになり、59%の削減で、すべてのピクセルは入力とビット同一です。パレットパス（imagequant）は同じファイルを98.3 KBに持っていき、90%の削減を実現し、256色に減らします。フラットなベクターアートはパレットモードの最良のケースです。なぜなら、6つの塗りを持つロゴは256色を放棄するものがないからです。圧縮はすべてのメタデータも削除します。コンプレッサーで両方を実行し、どちらが保持されるかを確認してください。

次にこれを行ってください：SVGをテキストエディタで開き、httpを検索してリンクされたフォントと画像をキャッチし、ライブテキストをアウトライン化し、ターゲットサイズの半分の幅と高さをルート<svg>に設定し、/convert/svg-to-pngにドロップします。PNGがウェブページに向かう場合は、すぐにコンプレッサーに送信し、透明性のあるファイルに対するPNGとWebPの数がフォーマットを変更する必要があるかどうかを教えてくれます。ドキュメントに向かう場合は、JPGからPDFへの変換に関する私たちのノートが変換された画像が最終的に持つページサイズをカバーしています。