SVGをPNGに変換するために必要なすべて
SVG（Scalable Vector Graphics）はピクセルではなく数学的なパスで構成されているため、どのサイズに拡大しても完全にシャープなまま表示されます。一方PNG（Portable Network Graphics）はピクセルベースの形式で、可逆圧縮と透明背景に対応しています。多くのデザインツールはSVGを出力しますが、画像を使う必要がある多くの場面 — マーケットプレイス、古いソフトウェア、プレゼンテーションスライド、SNS、印刷用テンプレート — ではPNGしか受け付けません。このツールは何もインストールすることなく、数秒でそのギャップを埋めます。
変換の仕組み
- ページにSVGファイルをドロップするか、クリックして選択します。
- プレビューが即座に表示されます — これはプレースホルダーではなく実際のSVGです。
- 自動検出されたカラースウォッチを使って、アートワークの任意の部分の色を変更できます（任意）。
- 背景（透明、白、またはカスタムカラー）と出力サイズを選択します。
- ダウンロードをクリックすると、ブラウザ自身がPNGを生成して保存します。
このカラーエディターが他と違う理由
多くのSVG→PNG変換ツールは、画像を単一のシルエットに平坦化することで「色を変更」します — これでは多色のロゴやアイコンが台無しになります。この変換ツールはSVG内の実際の形状、グラデーション、カラーストップを読み取り、検出された各色を個別に変更できるようにします。そのため、2色のロゴは2色のまま、5色のイラストは5色すべてが編集可能なまま維持されます。単色に統一したい場合のワンクリックオプションも用意されています。
ファイルは端末から一切送信されません
サーバーへのアップロードは一切ありません。選択したSVGは、Canvas APIを使ってブラウザ内で完全に読み込み、レンダリング、色変更、ラスタライズが行われ、生成されたPNGはそのままダウンロードフォルダーに保存されます。つまり、変換が高速で、サーバー側によるファイルサイズ制限もなく、デザインファイルの行き先を心配する必要もありません。
適切なサイズの選び方
SVGには固定の解像度がないため、「サイズ」はラスタライズして初めて意味を持ちます。アイコンやUI素材には小または中、バナーやSNS用グラフィックには大またはHDを、高密度（Retina）ディスプレイや印刷向けに余裕が必要な場合は元サイズの2倍または4倍を使用してください。カスタムサイズ欄では、アスペクト比ロック機能付きで正確な幅と高さをピクセル単位で指定でき、意図せず引き伸ばされる心配がありません。
よくある使用例
- ロゴ・ブランドマーク — SVGアップロードに対応していないプラットフォーム向けのPNG版が必要な場合。
- アイコン — Figma、Illustrator、Inkscapeからエクスポートし、使用前に特定のブランドカラーに合わせて色を変更する必要がある場合。
- アプリストア・マーケットプレイス素材 — 多くがラスター形式を明示的に要求します。
- メールや古いソフトウェア — SVGの表示が不安定、または表示されない環境向け。
- 印刷用モックアップ — 固定解像度の画像が必要な場合。