SVG を PNG に変換
ベクター画像をビットマップとして書き出しても、拡大してぼやけません。ベクターから再レンダリングしているためです。
SVG をドラッグ、または ファイルを選択
一括 · ローカル描画 · アップロードなしSVG が外部の画像やフォントを参照している場合（<image href="http://...">、外部 @font-face）、ブラウザのセキュリティ制限で読み取れないため、書き出しに失敗したり要素が欠けたりします。先にリソースを SVG にインライン化してください。
使う場面
- アップロード先が PNG か JPG しか受け付けず、手元には SVG 形式のロゴ、アイコン、QR コードしかないとき。
- アプリや Retina ディスプレイの Web サイト、スライド用に 2 倍・3 倍のビットマップが必要で、ベクターから描き直して輪郭をくっきりさせたいとき。
使わないほうがよい場面
- SVG が外部の画像、フォント、リモート CSS を参照しているとき。ブラウザの描画時にブロックされ、要素が欠けたり書き出しに失敗したりするため、先にリソースを埋め込んでください。
- 色や文字を後から変更したい、劣化なしで拡大したいとき。SVG の原本を残してください。PNG はビットマップなので、後から拡大するとぼやけます。
描画はブラウザ内で行われ、SVG がアップロードされることはありません。制限：出力は PNG のみです。外部の画像、フォント、CSS は読み込まれないため、事前に埋め込む必要があります。width/height のない SVG はサイズを決められないことがあります。アニメーションやスクリプトは静止画としてしか残りません。4 倍の出力はブラウザの canvas サイズとメモリの制約を受けます。
よくある質問
書き出した PNG のサイズはどう決まりますか？
SVG 自身の width と height に、選んだ倍率（1〜4 倍）を掛けたサイズになります。たとえば 24×24 のアイコンを 4 倍にすると 96×96 です。viewBox だけで width/height がない SVG は、エラーになったりサイズが正しくなかったりするため、先にエディタで幅と高さを追加してください。
書き出した PNG で文字や画像、スタイルが欠けるのはなぜですか？
SVG を画像として読み込む場合、外部リソースは参照できません。<image href="https://...">、@font-face、リモート CSS はセキュリティ制限でブロックされ、スクリプトやアニメーションも実行されません。文字はパスに変換し、画像は base64 で埋め込むか、リソースを内包できる書き出しツールを使ってください。
透明背景の PNG にするにはどうすればよいですか？
「透明背景」にチェックを入れると、アルファチャンネル付きの PNG になります。チェックを外すと選んだ色で背景が塗られます。PNG は可逆形式なので、4 倍の書き出しは元の SVG より大幅に大きくなることがあります。Web 表示なら 1 倍か 2 倍で十分で、4 倍は印刷や再加工向けです。