SVGファイルまたはXMLソースコードを、劣化なしの透明背景PNGへブラウザ内で即座に変換します。サーバーへのアップロード不要で、任意のピクセル解像度や商用印刷向け300DPIメタデータ書き出しに対応。
またはクリックして参照
ベクターパス、グラデーション、アルファ透過チャンネルが高解像度拡大や300DPI設定でどのように出力されるかをご確認いただけます。
元の256pxアートボードをベクター座標のまま4倍に拡大してからキャンバスへラスタライズ。曲線エッジのジャギー(ギザギザ)が一切発生せず、8ビットアルファチャンネルによりダークモードUI上でも滑らかな境界を維持します。
8×10インチ(300 DPI換算で2400×3000ピクセル)でレンダリングし、PNGヘッダー内にpHYs物理解像度メタデータ(11,811ピクセル/メートル)を記録。Adobe InDesignやチラシ・グッズ入稿テンプレートへ実寸のまま配置可能です。
「SVGコードを貼り付け」タブからHTML内のインラインSVGを直接読み込み、純白(#FFFFFF)背景を合成。Slack、Notion、X(旧Twitter)のダークモード表示で黒文字の図解が背景に沈んで読めなくなる問題を防ぎます。
SVGはWeb表示に優れたベクター形式ですが、多くの入稿システム、ECモール、オフィスソフトでは依然としてSVGファイルの直接配置が制限されています。本ツールは機密ファイルを外部サーバーへ送信することなく以下の課題を解決します。
Amazon出品画像、楽天市場、Shopify、note、各種メールマガジン配信ツールなど、セキュリティ(XSS対策)の都合で.svgがアップロードできない環境向けに、高品質な透過PNGを即座に生成します。
ブラウザの「名前を付けて画像を保存」では72 DPIの低解像度になり印刷するとぼやけます。カスタムピクセル指定と300 DPIメタデータ付与を組み合わせることで、DTPやオリジナルグッズ印刷にそのまま使える高精細PNGを作成できます。
ReactやVueコンポーネント内にあるインライン<svg>タグを画像ファイルとして保存したい場合、わざわざテキストエディタで.svgファイルを作る必要はありません。コードを直接貼り付けるだけでPNG化できます。
ブラウザ内のHTML5 Canvasエンジンで正確な縦横比とフォント描画を得るため、以下の条件を満たすSVGデータをご用意ください。
SVG 1.1 / 2.0準拠の.svgファイルのドラッグ&ドロップ、または<svg>〜</svg>タグの直接貼り付けに対応しています(圧縮形式の.svgzは事前に展開してください)。
ルート要素の<svg>タグに viewBox="0 0 幅 高さ" または明示的なサイズ属性が含まれていることで、アスペクト比を維持した正確なスケーリングが可能になります。
特殊なフォント(<text>要素)を使用している場合、Illustratorの「アウトラインを作成」やFigmaの「Flatten」で事前にベクターパスへ変換しておくと文字化けやフォント置換を防げます。
ブラウザのセキュリティ仕様により、SVG内から外部URL(http://...)を参照する<image>要素はブロックされます。ラスター画像を含む場合は data:image/png;base64 形式で埋め込んでください。
点線枠内に.svgファイルをドラッグ&ドロップするか、「SVGコードを貼り付け」タブに切り替えてXMLソースコードを入力します(「サンプルSVGを試す」で動作確認も可能です)。
1x(原寸)、2x(Retina)、4x(超高画質)のプリセットを選ぶか、カスタムサイズ欄に幅(px)・高さ(px)を数値入力します。印刷用途の場合は「300 DPI」を選択してください。
透過PNGを作る場合は「透明(Transparent)」を選択したままにします。白背景や黒背景、任意のカラーコード(HEX)で背景を塗りつぶすことも可能です。
変換ボタンを押すとブラウザ内で瞬時にラスタライズが完了します。個別のPNGファイルとして保存するか、複数ファイルを一括でZIPダウンロードできます。
生成されるファイルはロスレス圧縮された標準32ビットRGBA PNG形式(オプションのpHYs解像度チャンク付き)であり、以下の用途にそのまま利用できます。
2倍(@2x)や4倍(@4x)で書き出した透過PNGを、Xcodeのアセットカタログ、Android Studioのdrawableフォルダ、FigmaやWebflowへ高精細のまま配置できます。
SVGの直接貼り付けに対応していない古いバージョンのOfficeソフトやPDF生成ツールでも、高解像度PNGに変換しておくことで図表やロゴの崩れを完全に防げます。
300 DPIの物理メタデータと十分なピクセル数を持つ透過PNGとして、アクリルグッズ、ダイカットステッカー、Tシャツプリント業者へそのまま入稿できます。
ブラウザのローカル描画エンジンの仕様やセキュリティ制限により、以下のような現象が起きる場合があります。原因と対処法をご確認ください。
ブラウザのSVG画像サンドボックス制限により、Canvas変換時に外部Webフォント(@font-face)の通信読み込みが遮断されるためです。
Illustrator(書式 > アウトラインを作成)やFigma(右クリック > Flatten)にて、テキストをベクターパス(図形)に変換してからSVGを書き出してください。
元のSVGコードに viewBox 属性が設定されていないか、アートボードの境界外にパス座標が配置されていることが原因です。
姉妹ツールの「SVG ビューア (/svg-viewer/)」で領域を確認するか、<svg>タグに正しい viewBox="0 0 幅 高さ" を追記してください。
PCおよびスマートフォンのブラウザには、HTML5 <canvas> のGPUテクスチャメモリ上限(一般的に一辺16,384pxまたは総画素数約2.68億ピクセル)が設けられています。
出力ピクセルサイズは一辺 8,192px 以下(A3ポスターの300 DPI印刷でも約3508×4960pxで十分です)に収めて変換してください。
用途に合わせて当サイトの「一括変換ツール」や従来のクラウド型コンバーターとの違いをご確認ください。
| 比較項目・用途 | SVG PNG 変換(このツール) | SVG 一括変換 (/batch-converter/) | 一般的なクラウド変換サイト |
|---|---|---|---|
| 主な利用シナリオ | 単体〜少数ファイルの精密なピクセルサイズ指定、SVGコード貼り付け、300 DPI印刷出力 | 数十〜数百個のSVGアイコンをまとめてPNG / JPG / WebPへ一括変換&ZIP保存 | サーバーへファイルをアップロードして順番待ち変換(1日の枚数・容量制限あり) |
| サイズ指定・DPI制御 | 幅×高さ(px)の数値直接指定、1x〜4x倍率、72 / 150 / 300 DPI pHYsメタデータ付与 | 倍率指定(1x / 2x / 4x)およびファイル名の一括プレフィックス・サフィックス付与 | 72 DPI固定出力が多く、印刷用DPIヘッダーや細かなピクセル指定に非対応 |
| SVGコード直接入力 | 「SVGコードを貼り付け」タブを搭載し、インライン<svg>タグを即座に画像化 | ファイルおよびフォルダのドラッグ&ドロップ専用(大量ファイル処理に特化) | 非対応(一度ローカルに.svgファイルとして保存してからアップロードが必要) |
| プライバシーと処理速度 | 100%ブラウザ内Canvas処理。外部送信ゼロでミリ秒単位の即時変換 | 100%ローカル並列処理+ブラウザ内JSZipによる高速アーカイブ作成 | 社外秘ロゴや未公開デザインが外部サーバーに保存されるリスクと通信待ち時間が発生 |
印刷に必要なピクセル数は「印刷したいインチ寸法 × 300 = ピクセル数」(ミリメートルの場合は「mm ÷ 25.4 × 300」)で計算できます。例えば、10cm×15cm(約3.94×5.91インチ)のステッカーを300 DPIで印刷する場合、カスタムピクセルサイズに「幅 1181 px × 高さ 1772 px」と入力し、DPI設定で「300 DPI(高精細商業印刷・DTP用)」を選択してください。実寸に必要な画素数と300 DPIのpHYsメタデータの両方が書き込まれます。
一切劣化しません。JPGやPNGなどのビットマップ画像を引き伸ばすのとは異なり、本ツールはSVGの数学的なベクター座標を指定解像度に拡大してからHTML5 Canvasへ描画(ラスタライズ)するため、どれほど大きく出力してもエッジは常にシャープに保たれます。
完全に安全です。本ツールはサーバーへのファイル送信を一切行わず、お使いのブラウザ内のJavaScriptとWeb Canvas APIのみで変換処理を完結します。ページを開いた後はインターネットを切断したオフライン状態でも動作します。
Windowsの標準フォトアプリやスマートフォンの一部ギャラリーでは、透過部分を見やすくするために表示上だけ白や黒の背景を敷く仕様があります。本ツールで「透明」を選んでダウンロードボタンから保存したファイルは完全な32ビット透過PNGですので、PhotoshopやFigma、Webページに配置すれば正しく透過されます。
高解像度の32ビットPNGは無劣化の分ファイルサイズが大きくなります。ダウンロード後、当サイトの「PNG 圧縮ツール (/png-compressor/)」をご利用いただくと、ピクセルサイズと透過背景を100%維持したままファイル容量だけを50%〜75%軽量化できます。
用途ごとに特化したブラウザ完結型ツールと連携して作業を効率化できます。
複数のSVGファイルを一度にPNG・JPG・WebPへ一括変換し、ZIPアーカイブとしてまとめてダウンロード。
不要なメタデータやコメントを削除してSVGコードを最適化し、画質を損なわずにファイルサイズを最大80%削減。
画像のピクセルサイズ(解像度)を変えずに、透過PNGのファイル容量を最大75%スマート圧縮。
SVGファイルのプレビュー表示、背景色切り替え、viewBox・サイズ確認、XMLソースコードの整形・コピー。