# SVG to PNG 変換機：無限のベクトルから普遍的なラスタへ
SVG (Scalable Vector Graphics) はウェブデザインにとって完璧な選択肢です：無限にスケーラブルで軽量、そしてあらゆるコードエディタで編集可能です。しかし、そのロゴやアイコンをモバイルアプリで使用したり、ソーシャルメディアで共有したり、PowerPointプレゼンテーションに挿入したりしようとすると壁にぶつかります。これらのプラットフォームの多くはSVGをサポートしていません。 PNG 形式は普遍的なソリューションです：ラスタライズされており、アルファチャネルを持ち、絶対にあらゆる文脈で互換性があります。# SVG vs PNG：ウェブのためのベクトル、世界のためのラスタ
SVGは画像を数学的な命令として保存します。ベジェ曲線、グラデーション、多角形などがその例です。これは、同じファイルが16pxでも16,000pxでも完璧に見えることを意味します。ウェブコード、CSSアニメーション、および品質を損なうことなくさまざまな画面解像度に適応する必要があるあらゆる要素にとって理想的な形式です。PNGは、各ピクセルの色と透明度の情報を含むピクセルグリッドとして画像を保存します。 可逆 (lossless) 形式であり、品質が完全に保持されます。一度SVGがPNGにラスタライズされると、解像度は固定されます。そのため、適切なエクスポートサイズを選択することが重要です。当社のツールは、Retinaや4K画面での鮮明さを保証するために、2倍のスケール (2x) でレンダリングします。# 比較：ローカル変換 vs クラウド変換
クラウド変換機
リモートサーバーにファイルをアップロードするツールです。
- ユーザーのSVGコードが外部サーバーへ送信される
- 品質が一定しないリモートレンダリング
- アップロードと処理の待機時間
- SVGファイルサイズに関する制限
ローカルアーキテクチャ
Vanilla JS技術を使用し、ユーザーのハードウェア上で直接処理します。
- SVGデータがブラウザを離れることはありません
- 最大限の再現性を実現するブラウザネイティブエンジンのレンダリング
- 高密度画面用の2倍解像度PNG
- 完全なアルファチャネルにより透明度を維持
# 技術的な仕組み
プロセスは、SVGファイルをJavaScriptの Image 要素に読み込むことから始まります。ブラウザエンジンがベクトルのXMLを解析してレンダリングすると、結果の画像が元のSVGサイズの2倍（2倍スケール）の HTML5 Canvas 上に描画されます。これにより、高解像度画面に最適な、各次元で2倍のピクセルを持つPNGが生成されます。JPGへの変換とは異なり、PNGにエクスポートする場合、キャンバスは完全なアルファチャネルを保持します。元のSVGの透明な領域は、生成されたPNGで完全に透明なピクセルになります。白い背景の塗りつぶしはありません。エクスポートには、可逆圧縮のtoDataURL('image/png') メソッドを使用します。ラスタライズする前のアドバイス
PNGのエクスポートサイズは慎重に選択してください。SVGをラスタライズするのは一方向のプロセスです。生成されたPNGからベクトルを復元することはできません。常に元のSVGをマスターソースとして保持し、将来必要になる可能性のある最高の解像度でPNGを生成してください。# 活用事例と互換性
- PowerPointやGoogleスライドでのプレゼン用にベクトルロゴをエクスポート。
- iOS、Android、またはProgressive Web Apps用のPNGアイコンの作成。
- Instagram、LinkedIn、またはその他のソーシャルメディアでSVGデザインを共有。
- Word文書やPDFにベクトルイラストを挿入。
- CMSプレビュー用にSVGグラフィックのPNGサムネイルを生成。