🧬 SVG を PNG に

使い方の手順

1. SVG ファイルを選ぶ 枠にドラッグするかクリックして選択します。複数選択可。SVG はブラウザ自身が描画するため、Web ページ上の表示とまったく同じ結果になります。
2. 出力幅を入力する ベクターの最大の利点がここです。元の解像度という制約がないため、入力した数値どおりのサイズで、どれだけ大きくしても鮮明です。Web アイコンなら 512、印刷用途なら 3000 以上でも構いません。高さは元の比率に従います。
3. 形式と背景を選ぶ 透過を保つなら PNG か WebP を選び「透過を保持」にチェックを入れてください。JPG にはアルファチャンネルがないため必ず背景が付きます。用途に合う色を選んでください。
4. 実行してダウンロード ファイル名に出力幅が入ります（例：logo-1024.png）。複数サイズが必要なら幅を変えて再実行してください。元ファイルはそのままです。

こんなときに使えます

ベクターとラスターの違い

SVG は命令の集合です。「ここからそこへ線を引く」「この領域を青で塗る」といった具合に、ピクセルではなく形状を記述しています。そのためどんなサイズにも計算し直せ、常に鮮明です。

PNG はピクセルの格子です。変換した時点でサイズは固定され、拡大するには間のピクセルを推測するしかありません。それが「ぼやける」ということです。

したがって正しい進め方は、SVG を原本として保管し、必要なサイズをその都度書き出すことです。大きな PNG を 1 つ書き出して縮小して回すのは避けてください。

問題が起きやすいのは文字

SVG の文字は既定で「この文字をこのフォントで表示せよ」という指定であり、字形そのものを持っていません。つまり、そのフォントを持っていない環境で開くと違う見え方になります。

書き出し前に文字をアウトライン化すれば恒久的に解決します。文字が純粋なパスになり、フォントへの依存がなくなるためです。代わりに文言を編集できなくなるので、アウトライン化していない原稿も残しておいてください。

どのくらいの幅にするか

• Web アイコン — 512px で十分。CSS で縮小して使います
• SNS 投稿・カバー画像 — 1200〜2000px
• スライド・投影 — 2000px 以上。プロジェクタの解像度は想像より高めです
• 印刷 — 300 DPI 換算で：センチ数 ÷ 2.54 × 300

迷ったら大きめにしてください。ベクターの拡大に損失はなく、ファイルが重くなったら 画像を圧縮 で処理すれば済みます。

よくある質問

次に使いそうなツール

画像の作業は一度で終わらないことがほとんどです。「SVG を PNG に」とよく一緒に使われるのはこちら：

• ⭐ ファビコン作成 — 各サイズと .ico を一括生成
• 📐 サイズ変更 — 幅・比率・指定サイズで変更
• ⚡ PNG を WebP に — ファイルサイズを 3 割以上削減

仕上げたものをそのまま共有しますか？アップロードなら画像・写真・動画を短縮リンクにでき、パスワード・有効期限・閲覧回数の上限も設定できます。ツール一覧もどうぞ。