完全無料
SVG を PNG に 変換
ベクター形式のSVGファイルを、高品質なラスター形式のPNG画像に変換します。出力スケールや背景色をブラウザ上で簡単にカスタマイズできます。
ここにSVGをドロップ
最大50MBまで対応
または
ベクター形式のSVGファイルを、高品質なラスター形式のPNG画像に変換します。出力スケールや背景色をブラウザ上で簡単にカスタマイズできます。
最大50MBまで対応
SVG (Scalable Vector Graphics) は、品質を損なうことなく任意のサイズに拡大縮小できる一連の幾何学的なプリミティブ (パス、形状、テキスト、グラデーション) として画像を記述します。 PNG は、単一の長方形のピクセル グリッドを固定解像度で保存します。 SVG から PNG への変換はラスタライズのステップです。SVG の描画命令は選択されたピクセル サイズで評価され、結果のビットマップが PNG としてエンコードされます。出力は指定したサイズでは鮮明に見えますが、拡大するとピクセル化します。
このコンバータは、ブラウザの組み込み SVG エンジンを使用して SVG をレンダリングします。 SVG は Image 要素にロードされ、選択した出力寸法で HTML5 キャンバスに描画され、canvas.toBlob 経由で PNG としてエクスポートされます。ブラウザーがラスター化を行うため、複雑な SVG 機能 (グラデーション、フィルター、マスク、静的フレームとしてのアニメーション) は、実際の Web ページ上で行うのと同じ方法でレンダリングされます。
SVG から PNG への変換で最も重要な決定は、ターゲット サイズです。 SVG は解像度に依存しないため、実際の使用状況に一致する PNG サイズを選択すると、オーバープロビジョニング (サムネイル サイズのアイコン用の巨大なファイル) やアンダープロビジョニング (後で拡大したときに出力がぼやける) が回避されます。一般的なターゲット: アイコンの場合は 32×32 または 64×64、ロゴの場合は 256×256 または 512×512、ヒーロー グラフィックの場合は 1024×1024、Retina 品質のアセットの場合は 2048×2048。
SVG は Web や最新のデザイン ツールにとっては素晴らしいものですが、他の多くのコンテキストにとってはひどいものです。電子メール クライアントは SVG をレンダリングする際に一貫性がありません。セキュリティリスクとしてブロックする人もいます。古いオフィス ソフトウェア、特定の CMS、サードパーティ サービス、およびほぼすべての写真印刷パイプラインは、SVG をまったく受け入れません。 PNG に変換すると、選択したサイズで同一に見える、広く受け入れられているラスターが生成されます。
また、PNG は、受信者の SVG レンダラーに依存せずに、オフィス文書、スライドデッキ、PDF に確実に埋め込まれます。多くのプラットフォーム間で一貫して表示する必要があるロゴやグラフィックの場合、SVG のそもそもの魅力である解像度の独立性は失われますが、PNG の方が安全な選択です。
ターゲット サイズを選択してレンダリングします。ラスタライズはブラウザが行います。
SVG (W3C 勧告) は、パス、基本形状 (長方形、円、楕円、線、多角形、ポリライン)、テキスト、グラデーション (linearGradient、radialGradient)、フィルター、マスク、およびクリップ パスの要素を含む XML ベースのベクトル形式です。ブラウザーは、ページのレンダリング中に XML を解析し、DOM を構築し、CSS を適用し、結果をラスタライズします。
このコンバーターは、SVG を HTMLImageElement にロードし (これにより、ブラウザーの通常の SVG-as-image レンダリング パスがトリガーされます)、次に、drawImage を介してそれをキャンバスに描画します。キャンバスは、canvas.toBlob('image/png') を使用して PNG としてエクスポートされます。出力内の正確なピクセルは、SVG がブラウザー タブで同じサイズでレンダリングするものと一致します。
エッジケース:ForeignObject を使用する SVG は、Image 要素経由で使用される場合、常にサポートされるわけではありません。外部リソース (別のドメインへの xlink:href) を参照する SVG は、CORS が原因でロードに失敗する場合があります。 SMIL アニメーションと JavaScript 駆動のアニメーションは、最初のフレームとしてのみレンダリングされます。