SVG から PNG への変換ツール

SVG マークアップや .svg ファイルを、任意のスケールで鮮明な PNG や JPG に変換できます。すべてブラウザ内で動作し、アートワークは端末上に留まります。

SVG から PNG への変換ツールは、アートワークをブラウザ内の canvas 上でラスタライズします。ドロップまたは貼り付けた .svg ファイルやマークアップはローカルで変換され、ArrayKit にアップロードされることはありません。

画像変換ツールを開く

SVG から PNG への変換 について

SVG から PNG への変換ツールは、デザインソフトなしでベクターアートワークをピクセル画像にラスタライズします。.svg ファイルをドロップするか SVG マークアップを貼り付け、出力サイズ — 内在サイズの 1x・2x・3x の倍数、カスタムスケール、あるいはアスペクト比を保った明示的な幅と高さ — を選びます。SVG の width と height 属性、または viewBox からサイズを読むので、書き出すものはソースと一致します。ロスレスな透過には PNG を、より小さな写真には JPG を選び、透過または不透明な背景を設定できます。プラットフォームが SVG を拒否するとき、Retina の @2x アセットが必要なとき、ファビコン・README 画像・メールのグラフィックがビットマップでなければならないときに便利です。すべて canvas 上でローカルに描画され、アートワークが端末から外に出ることはありません。

機能

SVG から PNG への変換 の使い方

  1. .svg ファイルをドロップするか、SVG マークアップをソースエリアに貼り付ける
  2. スケール（1x/2x/3x またはカスタム）を選ぶか、明示的な幅または高さを入力する
  3. PNG か JPG を選び、透過または着色した背景を選ぶ
  4. ラスタープレビューを確認し、PNG または JPG をダウンロードする

例

入力

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32"><rect width="64" height="32" fill="#6d28d9"/></svg>

出力

64×32 SVG → 128×64 PNG at 2x scale

0 0 64 32 の viewBox を 2x でラスタライズすると 128×64 の PNG になります。

よくあるエラーとトラブルシューティング

よくある質問

SVG を高解像度の PNG として書き出すには？
スケールを 2x や 3x に設定するか、1024 のような明示的な幅を入力してください。ソースはベクターなので、より大きな出力サイズでも鮮明なまま保たれます — 単にラスタライズするピクセル数を選んでいるので、対象が必要とする解像度を選んでください。
この変換ツールは PNG の出力サイズをどう決めますか？
SVG の内在サイズを width と height 属性から、それらがないときは viewBox から読み、その後あなたのスケールや明示的な幅/高さを適用します。一方の寸法だけを設定すると、元のアスペクト比が保たれます。
SVG を PNG ではなく JPG に変換できますか？
はい。形式を JPG に切り替え、より小さなファイルには品質スライダーを使ってください。JPG には透過がないので、画像は白またはあなたが選んだ背景色に平坦化されます。透過背景が必要なときは PNG を使ってください。
PNG に変換した後、SVG のテキストが欠けるのはなぜですか？
ブラウザの canvas はシステムや Web のフォントなしでラスタライズするので、<text> が空白で描画されることがあります。ここでラスタライズする前に、ベクターエディターでテキストをアウトライン（パス）に変換するか、SVG にフォントを埋め込んでください。
SVG を PNG に変換すると透過背景は保たれますか？
PNG 出力は透過を保つので、透過背景オプションで PNG を選べば保たれます。プレビューでは画像が透けている箇所にチェッカーボードが表示されます。不透明な背景が必要なら単色の塗りつぶし色を選んでください。
PNG に変換するとき私の SVG はアップロードされますか？
いいえ。SVG から PNG への変換ツールは、すべてをブラウザ内の canvas 上で描画します。ドロップしたマークアップやファイルはローカルでラスタライズされ、結果が端末から外に出ることも ArrayKit に送られることもありません。

関連ツール

すべての ArrayKit ツール