SVG to PNG Converter — Render SVG as PNG

Convert SVG files to PNG in your browser. Choose output scale (1x, 2x, 3x, 4x) for high-res export.

Drop SVG file here

or click to select

Related Articles

SEO

Favicon Complete Guide: Sizes, HTML, iOS, Android & PWA

Everything you need to know about favicons — which sizes to generate, …

Read more →

About SVG to PNG Converter — Render SVG as PNG

SVG to PNG Converter renders SVG vector graphics to raster PNG images at any resolution. Export icons, logos, and illustrations as PNG for use in contexts that don't support SVG, like email clients and some image editors.

How to Use

  1. 1Select or drag and drop your SVG file onto the tool.
  2. 2Set the desired output width and height in pixels.
  3. 3Click "Convert" and download the PNG at the specified resolution.

Features

  • Render SVGs to any pixel resolution for sharp, high-DPI output
  • Use SVG icons and logos in contexts that require raster images
  • No server upload — rendering happens in the browser
  • Preserves SVG colors and shapes accurately
01

SVGとPNGの違いと変換が必要な場面

SVGはスケーラブルベクターグラフィックスの略で、数学的な式でパスや形状を定義するXMLベースの画像形式です。対してPNGはピクセル単位でデータを格納するラスター形式です。それぞれに長所があり、用途に応じた変換が必要になります。

SVGの長所と限界

SVGは解像度非依存のベクター形式のため、ロゴ・アイコン・グラフ・図表などはどんなサイズでも鮮明です。ファイルサイズが小さくHTTPリクエストも1回で済みます。テキスト検索・CSS/JSでのスタイリング・アニメーションも可能です。ただし写真のような複雑な画像には不向きで、すべてのツールやサービスがSVGに対応しているわけではありません。

SVGがPNGに変換できない要素

アニメーション・フィルター効果（feGaussianBlurなど）・複雑なシェーダー・外部リソース参照などは、PNGへの変換時に一部が省略または簡略化されます。また、SVGに<foreignObject>タグでHTMLが埋め込まれている場合、変換結果に反映されない場合があります。変換後に意図した見た目になっているか必ず確認してください。

SVG→PNG変換が必要な代表的なシナリオ

①ファビコン生成（SVGを高解像度PNGに変換後、各サイズに展開）、②印刷物入稿（印刷所によってはSVG非対応のためPNGやPDFが必要）、③SNSのアカウントアイコン（FacebookやLINEなどSVG非対応のサービスへの投稿）、④SVGを受け付けないWebサービスへのアップロード（一部のCMSや画像ホスティング）、⑤メール本文やHTMLメールへの画像埋め込みが挙げられます。

02

高品質SVG→PNG変換のための解像度設定と最適化

SVGからPNGへの変換品質は出力解像度の設定に大きく依存します。用途に合わせた適切な解像度を選ぶことで、鮮明なPNG画像を得られます。

用途別の推奨出力解像度

ファビコン用途: まず512×512pxで変換してから各サイズに縮小。Webアイコン（通常表示）: 48〜128px。Retina/HiDPI対応: 表示サイズ×2倍（例：64px表示→128px出力）。OGP画像内のロゴ: 200〜400px程度。印刷物（A4サイズ全面）: 300dpi換算で2480×3508px相当。スマートフォンアプリアイコン（iOS）: 1024×1024pxが最高品質の原版として必要です。

Retina（高解像度）ディスプレイ対応のポイント

Retinaディスプレイ（MacBook・iPhone・iPad）では1CSSピクセルに2物理ピクセルが使われます。アイコンが64×64pxで表示される場合、128×128pxのPNGを提供することで鮮明に表示されます。SVGのまま使えばこの問題は発生しませんが、PNGが必要な場合は必ず高解像度で変換してからHTMLの width/height 属性で表示サイズを指定してください。

変換後の最適化：PNG圧縮の活用

SVGからPNGに変換するとファイルサイズが大きくなる場合があります。特に高解像度（512px以上）では数百KBになることもあります。変換後に画像圧縮ツールでPNGを圧縮することで、画質を維持しながらファイルサイズを削減できます。Webサイト用途では128px以下のアイコンPNGで10〜30KB程度が目安です。

FAQ

Why would I convert SVG to PNG if SVG is scalable?
SVG is not supported in all contexts — email clients, some image editors, and older apps require raster formats.
What resolution should I export at?
For standard displays, 1× the intended display size is fine. For retina/HiDPI, export at 2× or 3× the display size.
Will the PNG have a transparent background?
Yes, if your SVG has a transparent background, the resulting PNG will also be transparent.
Why does my SVG look different when converted to PNG?
Differences can occur for several reasons: fonts specified in the SVG not being available during rendering (replaced with fallback fonts), SVG filters or effects not supported by the renderer, external resources (images, fonts) linked but not embedded in the SVG, or CSS that relies on browser-specific rendering. For reliable SVG-to-PNG conversion, embed all resources, use web-safe fonts or convert text to paths, and avoid browser-specific CSS properties.
What resolution should I use for SVG to PNG conversion?
Choose the output resolution based on the intended use. For web use at 1x: match the display size (e.g., 800px for an 800px display slot). For retina/2x displays: double the display size (1600px for an 800px slot). For print at 300 DPI: multiply the print size in inches by 300 (a 4-inch wide printed image needs 1200px). SVG is infinitely scalable, so you can generate any size without quality loss from the original vector file.

Found a bug or something not working as expected?

Report a bug →