How to Convert SVG Code to PNG (and Save SVG as a File)
Copied an icon and ended up with a block of SVG markup instead of a file? Here's how SVG and PNG differ, when to use each, and how to turn pasted SVG code into a usable image in your browser.
You copy an icon out of a design tool, a component library, or a code snippet — and instead of a file, you get a wall of text starting with <svg>. That text is the image, but most apps want an actual file. Here's how to turn SVG markup into something you can use.
SVG vs PNG in one line
- SVG is a vector — instructions the browser draws. It scales to any size with zero blur, and the file is usually tiny. Ideal for logos, icons, and print.
- PNG is a raster — a fixed grid of pixels. Every app accepts it, but blow it up past its native size and it goes fuzzy.
So the rule of thumb: keep the SVG when you control where it's used and want it razor-sharp; export a PNG when a tool only accepts image files.
Why scale matters for PNG
Because SVG is resolution-independent, you choose how big the PNG comes out. A logo exported at 1× might be 100×100; at 4× it's 400×400 and stays crisp on high-DPI "retina" screens and in print. When you rasterise SVG to PNG, pick a scale that matches where it'll be displayed rather than exporting small and enlarging later.
When PNG export can fail
One gotcha: browsers refuse to rasterise an SVG that pulls in external images or fonts for security reasons. If a PNG export comes out blank, inline any referenced assets (embed images as data URIs, convert text to paths) and it'll work. The plain SVG download is never affected by this.
Do it in your browser
The free SVG Downloader does exactly this: paste your <svg>…</svg> markup, preview it live, then download it as an .svg file or a PNG at 1×, 2×, or 4×. It runs entirely client-side, so your markup never leaves your device — safe for brand assets.
Related free tools
SVG Downloader | QR Code Generator | Seal Generator | All free tools