SVG→PNG変換 - SVGを好きなサイズでラスタライズ、オンライン無料

SVG→PNG変換の仕組み

SVGはPNGのような意味での「画像」ではありません。図形やパス、文字を数式として記述したテキスト文書であり、円は中心と半径であって、色の付いた点の格子ではありません。PNGはその正反対で、一度決めたら後から変えられない固定のピクセル格子です。したがって両者の変換は詰め替えではなく、レンダリングになります。ブラウザ自身のSVGエンジンが、指定されたサイズで図版を一から描き直し、その描画結果のピクセルがPNGになります。このツールが、ほかのツールでは尋ねない幅と高さを聞いてくるのはそのためです。保存すべき「元の解像度」というものが存在しないのです。512ピクセルを指定すればすべての曲線が512ピクセルで計算され、4096ピクセルを指定すれば同じファイルから拡大もぼけもない鮮明な4096ピクセルの画像ができます。品質を決めるのは、あなたが選んだサイズだけです。サイズ指定には、ある落とし穴を避けるという役割もあります。ルート要素に幅と高さを持たないSVGには固有のサイズがまったくなく、単なる画像として描画しようとしたブラウザは、CSSの既定値である約150ピクセルにフォールバックします。アイコンセット、Figmaからの書き出し、手書きのファイルには、まさにこの形のものが数多くあります。比率だけを固定して縮尺は決めないviewBoxしか持っていないのです。何も考えずに変換すると、大型看板用のロゴがサムネイルになって返ってきます。このツールは先にファイルを読み、サイズがファイル由来ではなくこちらの判断であるときはそれを明示し、150ピクセルで黙ってラスタライズすることを拒否します。