SVGからPNGへ変換:ベクターをブラウザでラスタライズ

SVGベクターファイルをブラウザでPNGビットマップにラスタライズ。アルファチャンネルを保持し、出力サイズも指定可能。アップロード・透かし・登録なし。

ブラウザーネイティブ
プライバシー第一
無料

今すぐ変換

ファイルをここにドラッグ&ドロップ

または

使い方

デザイナーがロゴやアイコンをSVGで渡すのは、ファイルの実体がXMLで、レンダラーがどの拡大率でも鮮明に描き直してくれるからです。問題が起きるのは、そのファイルをSVGレンダラーを持たない相手に渡した瞬間です。マーケットプレイスのアップロードフォーム、メールソフト、スライド資料、印刷会社の入稿窓口など。相手が欲しいのはピクセルの格子です。SVGをPNGにラスタライズすれば、まさにそれが、一つの解像度に固定された形で得られます。 このツールはSVGをお使いのブラウザ自身の描画エンジンに渡し、キャンバスへ描いて、そのキャンバスをPNGとして読み出します。出力サイズはファイル自体から決まります。コンバーターはSVGのwidthとheight属性を使い、これらが無ければviewBoxにフォールバックします。512×512と宣言されたSVGは512×512のPNGになります。別のサイズが必要なら、変換前にこれらの値を設定してください。ベクターの拡大は無料ですが、完成したPNGの拡大はぼやけさせるだけだからです。 PNGの書き出し自体は可逆なので、エンコードでピクセルが劣化することはありません。唯一引き換えになるのはSVGの解像度非依存性です。ビットマップは格子に固定され、後から鮮明にすることはできません。ただし透明度はそのまま保たれます。PNGは完全なアルファチャンネルを持つため、透明・半透明の領域は背景に塗りつぶされることなく透明のまま残ります。 すべてはJavaScriptでローカルに動きます。ファイルはお使いのマシン上で解析・描画・エンコードされ、サーバーに触れることはありません。未公開のロゴやNDA下のクライアント案件には、まさにこれが望ましい形です。

関連変換ツール

あなたのワークフローに役立つ他の強力なコンバーターを発見してください

SVGをJPEGに:ベクター画像を白背景でラスタライズ

SVGベクターファイルをブラウザでJPEGにラスタライズ。透明部分は白に統合され、出力は品質0.92の非可逆ラスターです。アップロードなし、透かしなし。

SVGをWebPに変換:ベクターをラスタライズし透明度を保持

SVGベクターをブラウザでWebPにレンダリング。アルファチャンネルを保持し、PNGより小さく、アップロードや登録は不要。出力サイズはSVG側で指定できます。

AVIFをPNGに変換:AV1画像をブラウザでデコード

AVIF(AV1)画像を、ブラウザ内で透明度をピクセル単位で保ったままPNGに可逆変換。アップロードもサーバーも不要、完全プライベートで無料です。

Base64からPNGへ:data URIをブラウザでデコード

Base64文字列やdata:URIを貼り付けて、ローカルでPNGにデコード。アルファ透過を保持し、アップロードもサーバーも不要。完全にクライアント側でデコードします。

PNGをJPEGに変換 - 重い写真PNGを軽くする

ブラウザでPNGをJPEGに変換し、写真のファイルサイズを削減。品質85の不可逆圧縮で再エンコードし、透明部分は背景色で塗りつぶされます。アップロードなし、ファイルは端末から出ません。

JPEGをPNGに変換:ブラウザ内で可逆コピー

アップロードなしでJPEGをPNGにローカル変換。PNGが必須のツール向けに可逆の作業用コピーを作成。画質が上がらない理由とファイルが大きくなる理由も正直に説明します。

機能

  • ファイルアップロード不要
  • 100% プライバシー重視
  • ブラウザー駆動
  • 高速処理
  • 永久無料

対応フォーマット

.svg

出力: PNG

技術仕様

input Format SVG(Scalable Vector Graphics、XMLベースのベクター)
output Format PNG(Portable Network Graphics、ラスタービットマップ)
compression Type ラスタライズ後、可逆のDEFLATE方式によるPNGエンコード
quality Retention レンダリング解像度では可逆。ラスタライズによりベクターの拡大性は失われる
color Space Support RGBと完全な8ビットアルファ(透明度を保持)
max Resolution デバイスのメモリのみが上限
processing Time 即時、ブラウザ内で実行

主な利点

  • SVGを拒否するツールやプラットフォームにベクター素材を投入できる
  • 透明・半透明の領域がPNGのアルファチャンネルで保たれる
  • SVGが宣言する解像度のまま可逆のPNGエンコード
  • 出力サイズはSVG自身の寸法で決まり、予測しやすい
  • ソースのサイズ調整で2倍・高DPIのビットマップを画質を損なわず作成
  • 完全にブラウザ内で動作するため、機密のデザインがアップロードされない
  • スマホやタブレットを含む、モダンブラウザのある任意のデバイスで動作

一般的な使用例

  • ラスター画像しか受け付けないプラットフォームやマーケットプレイスへのロゴのアップロード
  • Word、PowerPoint、Googleドキュメント、スライドへのベクターアイコンの埋め込み
  • SVGアセットの固定サイズのサムネイルやプレビューの生成
  • SVGを除去・ブロックするメール署名やチャットアプリ
  • PNGのアップロードを求めるプリントオンデマンドやアプリストアの掲載
  • SVGをまったく開けないソフトとのグラフィックの共有
  • マスターのベクターから、特定のピクセルサイズでアプリアイコンやファビコンを書き出し

プロのヒント

  • 正確なピクセルサイズを決めるため、変換前にSVGに明示的なwidthとheightを設定する
  • より高い解像度が必要なら、完成したPNGではなくSVGの寸法を拡大する
  • テキストはアウトライン化し、参照画像はデータURIとして埋め込むと描画される
  • 透明度や鮮明なフラットカラーのエッジが必要なときは、JPGではなくPNGを選ぶ
  • 無限に拡大できる必要があるものは、元のSVGを保管しておく
  • PNGは後から鮮明にできないため、現実的に使う最大サイズでレンダリングする

よくある質問

多くの渡し先はセキュリティや互換性の理由でSVGを拒否します。ほとんどのSNS、メール署名、Slackなどのチャットアプリ、WordやPowerPoint、そして多くのプリントオンデマンドや古いソフトです。相手が欲しいのはラスターのビットマップです。PNGなら透明な背景を保ったままそれを渡せるので、ロゴやアイコンが白い枠なしにそのまま収まります。
SVGのwidth/height属性から、それが無ければviewBoxから決まります。512×512と宣言されたSVGは512×512のPNGになります。大きく、または小さくしたい場合は、変換前にSVG内のこれらの寸法を編集してください。ベクターの拡大には何のコストもかかりませんが、後からPNGを拡大するとぼやけます。
はい。PNGは完全な8ビットのアルファチャンネルに対応するため、SVGの透明・半透明の領域は変換後も保たれます。これがSVGに対してJPGではなくPNGを選ぶ主な理由です。JPGでは単色の背景に塗りつぶされてしまいます。
レンダリングされたサイズでは、はい、ピクセル単位で鮮明です。違いが出るのは拡大したときだけです。SVGはどのサイズでも完璧に描き直されますが、PNGはピクセル格子に固定され、拡大するとぼやけます。現実的に必要となる最大の寸法でレンダリングし、サイズ変更が必要なものは元のSVGを保管してください。
ブラウザはSVGを単独の文書としてレンダリングするため、外部から取り込まれるもの(ページが読み込んだWebフォントや、リンクされた外部画像)は変換時に利用できません。テキストをアウトライン化するかフォントをbase64で埋め込み、参照画像はデータURIとしてインライン化してから、再度変換すると正確な結果が得られます。
はい、ソースのサイズで調整します。変換前にSVGのwidthとheightを2倍にすれば(例えば256を512に)、ベクターが新しいサイズで描き直されるため、画質を損なわずに2倍のビットマップが得られます。すでにレンダリング済みのPNGを拡大しても同じようにはいきません。補間されてエッジが甘くなるだけです。
いいえ。SVGの解析・描画・エンコードはすべてJavaScriptとキャンバスを使ってブラウザ内で完結します。サーバーへの送信・保存・ログ記録は一切ないため、機密のブランド素材や未公開のデザイン作業にも安全です。
JPGは非可逆で透明度を持たないため、SVGの透明領域は白で塗りつぶされ、鋭いエッジには圧縮ノイズが乗ることがあります。PNGは可逆でアルファを保持するので、ロゴ・アイコン・フラットなイラストにより適しています。JPGを選ぶのは、きれいなエッジよりファイルの小ささが重要な、密度の高い写真的な素材のときだけにしてください。