使い方

.svgファイル（最大5 MB）を選ぶか、ボックスにSVGコードを貼り付けます。
倍率を選びます。高密度画面向けなら2×などを選択するか、幅をピクセル単位で指定します。
背景を透明のままにするか、色を選びます。
プレビューを確認し、PNGをダウンロードします。ブラウザーが対応している場合はWebPも選べます。

仕組み

SVGはベクター形式です。図形を数式で表すため、どのサイズでも鮮明に描画できます。PNGはピクセルの集合で、多くのアプリ、文書、メールクライアント、ソーシャルネットワークで必要とされる形式です。このツールは、ブラウザー内蔵の描画機能でSVGを指定サイズに描画し、ピクセル画像をPNGとして保存します。

初期サイズはSVGのwidth属性とheight属性から取得します。絶対単位はピクセルに換算されます（1 in = 96 px、1 pt = 1.33 px）。幅または高さのどちらか一方、あるいは両方が指定されていない場合は、viewBoxから縦横比とサイズを取得します。どちらもない場合、ブラウザーは300 × 150を使用します。100%などの相対値は単独のファイルでは解決できないため、代わりにviewBoxが使用されます。

SVGは画像として読み込まれます。これは信頼できないファイルを安全に描画する方法です。スクリプトは実行されず、リンクされた画像、Webフォント、CSSファイルなどの外部リソースも取得されません。インストールされていないフォントに依存するテキストは、代替フォントで描画されます。最初にXMLを検証するため、入力ミスがある場合は空白の画像ではなく、分かりやすいエラーが表示されます。

使用例

SVGロゴからアプリアイコンを作成

viewBox="0 0 64 64"のロゴを幅1024で書き出すと、輪郭が鮮明な1024 × 1024のPNGになります。アプリストアやfavicon生成ツールですぐに使えます。

Webサイト向けRetina画像

1×で400 × 300のイラストを倍率2で書き出すと、高密度ディスプレイでも鮮明な800 × 600のPNGになります。

スライドや文書に使用

グラフのSVGを倍率3、白い背景で書き出すと、SVGに対応していないプレゼンテーションソフトにも貼り付けられるPNGが作成できます。

よくある質問

テキストのフォントが正しく表示されないのはなぜですか？

SVGを画像として描画する際、Webからリンクされたフォントは読み込まれません。お使いのデバイスにインストールされ、該当するフォントがあれば使用されます。確実に表示するには、デザインソフトでテキストをアウトライン化するか、data URLとしてフォントをSVGに埋め込んでください。

リンクした画像が表示されないのはなぜですか？

SVGを画像として描画する際、SVG内でURL参照されている画像はセキュリティ上の理由からブロックされます。埋め込み画像（data: URL）は使用できます。

出力サイズの上限はどれくらいですか？

1辺あたり最大16,384 px、合計50メガピクセルです。複雑なSVGを大きなサイズで書き出すと数秒かかることがあり、メモリの少ないスマートフォンでは失敗する場合があります。

出所不明のSVGを変換しても安全ですか？

ここでの描画は安全です。SVGは画像として描画されるため、スクリプトを実行したり外部リソースを読み込んだりできません。変換後のPNGに含まれるのはピクセルのみです。

プライバシー

SVGはブラウザー内で解析・描画されます。アップロード、保存、アクセス解析への送信は行われません。