SVGをPNGに変換

SVGのロゴやアイコンはベクターですが、SNS、Office文書、メール署名、アプリストアは、たいていPNGを求めます。この変換ツールは、SVGを選んだピクセルサイズでぴったり描き直すので、小さなビットマップを引き伸ばした場合と違い、2倍や4倍でも輪郭がくっきりします。ファイルを読み込むか、コードを貼り付けてください。すべてブラウザー内で処理され、何もアップロードされません。

使い方

1. .svgファイルを1つ以上ドロップするか、SVGのマークアップをテキストボックスに貼り付けます。
2. 出力サイズを選びます。1倍、2倍、4倍、倍率を指定、または幅をピクセルで指定です。
3. PNG・JPG・WebPのどれかと、透明・白・黒・好きな色の背景を選びます。
4. 「変換」を押して、画像をダウンロードします（複数ファイルの場合はZIPになります）。

計算式

出力の幅 = SVGの幅 × 倍率（または入力した正確な幅）；出力の高さ = 出力の幅 × SVGの高さ ÷ SVGの幅。

SVGのサイズは、widthとheight属性から取得します（cm、mm、in、pt、pcは、CSSの基準である1インチ96pxで換算）。ない場合はviewBoxから取得します。

計算例

viewBox="0 0 24 24"だけで、幅と高さがないアイコンは24 × 24pxとして扱われます。4倍にすると96 × 96pxのPNGに、正確な幅を512にすると512 × 512pxになります。

描画されないことがあるもの

画像の中では、ブラウザーはURLで参照された外部の画像、Webフォント、@importのスタイルシートを読み込まず、スクリプトやアニメーションも動きません。埋め込まれたdata: URIは動作します。文字が代替フォントで表示される場合は、編集ソフトで文字をアウトライン化してください。この変換ツールは1辺あたり最大16,384px（120メガピクセル）まで許容し、これはデスクトップのブラウザーが描画できるサイズです。iPhoneやiPadはキャンバスを約1670万ピクセルに制限するため、そちらでは4,000 × 4,000px程度までにしてください。