SVGをPNGに変換

いいえ。変換はブラウザ内のWebAssemblyで完結するため、ファイルがお使いの端末の外に出ることは一切ありません。サーバーを介さない仕組みなので、ページを一度読み込めばオフラインでも動作し、ファイルサイズの制限は端末のメモリだけです。

SVGはベクター形式なので決まったピクセル数がなく、出力の解像度は自分で選べます。倍率はSVGに書かれたサイズに掛ける倍数で、100×100のアイコンを3倍で書き出すと300×300の画像になります。ベクターから直接描画されるので、どの倍率でも輪郭はくっきりしたままです。あとから拡大するのではなく、用途に必要なサイズを最初から指定してください。

引き継がれます。SVGが塗らずに残した領域は、設計どおりPNGでも透明になります。背景が何色か分からない場所に置くロゴやアイコンの書き出しに、これ以上の相性はありません。

ツールはSVGが宣言するwidth/heightを読み、倍率はそれに掛かります。viewBoxだけでサイズ宣言のないSVGはブラウザが既定値を仮定するため、小さく出たと感じたら倍率を3×か4×に上げるのが手っ取り早い解決です。

インラインのパスやbase64で埋め込んだ画像は問題ありません。外部ファイルやWebフォントへの参照は、ラスタライズ時にブラウザがクロスオリジン読み込みを遮断するため反映されないことがあります。文字の多いSVGは、先にデザインツールでアウトライン化しておくのが確実です。

世の中のソフトの半分はベクターを受け取れないからです。スライド、マーケットプレイス、アプリストアの掲載画像、大半のフォーム、全SNSがピクセルを要求します。SVGを原本として手元に残し、行き先ごとに必要なサイズのPNGコピーを書き出す——1〜4×の倍率は、そのコピーをあとから拡大するのではなく最初から鮮明に作るためにあります。

行き先が本当にベクター対応のとき——自分のサイト、アイコンシステム、デザイナー間の受け渡し——です。ラスタライズしたロゴは1つの解像度に固定されますが、原本はどのサイズでも鮮明で、たいてい大きなPNG1枚より軽いのです。保存形式としてのラスタライズは避け、行き先ごとに書き出してください。ウェブ配信で容量最優先ならSVGをWebPに変換がPNGより軽いコピーを作ります。