SVG PNG 変換ツール

LINE スタンプ用の PNG を一括で書き出す

LINE Creators Market の制作ガイドライン（スタンプ）では、画像はすべて PNG、スタンプ画像は最大 横 370 × 縦 320 px、メイン画像は 240 × 240 px、トークルームタブ画像は 96 × 74 px で、サイズは偶数、背景は透過、1 個あたり 1MB 以下と決められています。Illustrator や Figma で描いた SVG なら、本ツールで次のように書き出せます（2026-09-30、macOS の Chrome 152 で実測。素材は viewBox=“0 0 100 100” の顔アイコン 3 枚）。

どれも偶数サイズ・透過背景・1MB 以下で、ガイドラインの条件に収まります。

出力サイズの決まり方

等倍では、SVG のルート要素が宣言するサイズで出力します。単位は CSS の絶対長で換算します（1in = 96px、1mm = 96/25.4px）。

• width=“50mm” height=“25mm” → 189×94。mm を px と取り違えると 50×25 になります。
• width=“200” と viewBox=“0 0 24 12” → 高さは viewBox の比率から 100。
• viewBox だけ → viewBox の幅と高さ。width=“100%” のような割合は置き場所のページで決まるため、viewBox を使います。
• どれもない → 300×150。

描画の前に、出力サイズを SVG の width と height に書き込み、viewBox がなければ補います。小さな画像を引き伸ばすのではなく、最終解像度でベクターを描き直します。「幅 × 高さ」の比率が SVG と違うときは、SVG の preserveAspectRatio に従って配置されます（既定は中央）。

自動で直すこと・知らせること

• xmlns の欠落：HTML に直接書いた <svg> には xmlns が要らないため、Web ページや React コンポーネントからコピーしたコードにはよくありません。そのまま保存した SVG は画像として開けないので、本ツールは xmlns=“http://www.w3.org/2000/svg” を補って変換し、補ったことを表示します。
• 外部参照：<img> として描画される SVG は SVG Integration 仕様の secure animated mode で処理され、スクリプトも外部ファイルも使えません。Chrome では外部 <image> が「画像なし」アイコンとして描かれてしまうため、リンクを外して URL を一覧表示します。
• XML エラー：何行目・何列目かと原因を日本語で示します。属性の引用符の閉じ忘れ、終了タグの食い違いなどが対象で、本文に  （HTML の文字参照）があれば   への書き換えを案内します。
• <foreignObject>：Chrome は SVG 内の HTML を描いた canvas の書き出しを拒否します。空の画像を出さずに理由を表示します。

変換の前にファイルを軽くするなら SVG 圧縮・最適化ツール、React で使うなら SVG → JSX、favicon 一式を作るなら Favicon ジェネレーターが使えます。

ほかの変換ツールとの違い

2026-09-30 にデスクトップ版 Chrome で同じファイルを使って確認しました。「幅だけ」は width=“200” viewBox=“0 0 24 12” の SVG で、等倍の正解は 200×100 です。

shinsu.jp は width=“100%” と 200×100 の viewBox を持つ SVG も 100×100 で出力し、円が縦長につぶれました。どちらもブラウザ内で変換するツールで、svgtopng.com は一度に 20 ファイルまで扱えます。

制限

• 描画はブラウザ自身の SVG エンジンで行うため、Chrome・Firefox・Safari で文字のアンチエイリアスやフィルターの結果が少し異なることがあります。
• 文字はこの端末にインストールされたフォントで描かれます。別の PC ではフォントが変わることがあるので、固定したいときはフォントを data: URI で @font-face に埋め込んでください。
• <foreignObject> を含む SVG は、Chrome（152 で確認）と同じエンジンの Edge では書き出せません。
• SMIL アニメーション付きの SVG は最初のフレームだけを保存します。
• canvas から WebP を書き出せないブラウザでは PNG が返されます。本ツールはその PNG を保存し、その旨を表示します。
• .svgz（gzip 圧縮した SVG）には対応していません。展開してから読み込んでください。

コマンドラインでの一括変換

ファイルが多い場合やビルド処理に組み込む場合は、librsvg で SVG を描画する Node.js ライブラリ sharp が使えます。sharp 0.34.5（librsvg 2.61.2）で viewBox だけを持つ 24 × 24 のアイコンを変換した結果：

import sharp from 'sharp'; // npm install sharp

await sharp('icon.svg').resize(512, 512).png().toFile('icon-512.png');   // 512 × 512
await sharp('icon.svg', { density: 288 }).png().toFile('icon@4x.png');   // 4 × the SVG size

resize も density も指定しないと、PNG は SVG 自体のサイズ（ここでは 24 × 24）になります。既定の密度は 72 なので、density: 288 で 96 × 96 です。librsvg はブラウザとは別の描画エンジンで、Web フォントや CSS の @import に依存する文字は見た目が変わることがあります。フォルダごと変換する前に、1ファイルをこのページの結果と比べてください。