SVG Code to PNG: 3 Ways to Turn SVG Markup into an Image
Have a block of SVG code and need a PNG? Here are three tested ways to convert SVG markup to a PNG image — a copy-paste browser tool, a one-line Terminal command, and an online converter. With a real, working example.
Sometimes you don't have an SVG file — you have SVG code. Maybe an AI assistant generated it, maybe you copied it from a design tool, or maybe you hand-wrote it. Either way, the code renders fine in a browser but you need a real PNG image to upload, email, or drop into a slide. This guide shows three tested ways to turn a block of SVG markup into a PNG, starting with the one that needs nothing but a browser.
Here's a real, working example we'll use throughout. Copy it and follow along:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#6366f1"/>
<stop offset="1" stop-color="#8b5cf6"/>
</linearGradient>
</defs>
<rect width="240" height="240" rx="48" fill="url(#g)"/>
<circle cx="120" cy="98" r="42" fill="#ffffff"/>
<text x="120" y="188" font-family="Arial, sans-serif" font-size="40"
font-weight="700" fill="#ffffff" text-anchor="middle">WREN</text>
</svg>The one setting that matters: scale
SVG has no built-in resolution, so when you rasterize it to PNG you pick the size. Multiply the SVG's dimensions by a scale factor — 4× or 5× — to get a sharp, high-resolution PNG instead of a small, soft one.
Method 1: A copy-paste browser converter
Save the file below as svg-to-png.html, open it in any browser, paste your SVG code into the box, set a scale, and click the button. It rasterizes the code and downloads a PNG. Everything runs locally in your browser — nothing is uploaded.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>SVG code to PNG</title></head>
<body>
<textarea id="code" rows="10" cols="60">Paste your SVG code here</textarea>
<br>
<label>Scale: <input id="scale" type="number" value="4" min="1"></label>
<button id="go">Convert to PNG</button>
<script>
document.getElementById('go').onclick = function () {
const svgText = document.getElementById('code').value;
const scale = parseFloat(document.getElementById('scale').value) || 1;
const blob = new Blob([svgText], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const img = new Image();
img.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = img.width * scale;
canvas.height = img.height * scale;
canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
URL.revokeObjectURL(url);
const a = document.createElement('a');
a.href = canvas.toDataURL('image/png');
a.download = 'image.png';
a.click();
};
img.src = url;
};
</script>
</body>
</html>Tested in a browser with the example code above: at scale 5 it produced a clean 1200×1200 PNG (240 × 5) with the gradient and text intact. For the browser to know the pixel dimensions, make sure your SVG has width and height attributes on the root element, like the example does.
Method 2: One line in the Terminal
If you're comfortable with the command line — and especially if you're doing this repeatedly — save your SVG code to a file and convert it with rsvg-convert. On a Mac, install it once with Homebrew:
brew install librsvgThen save your markup as logo.svg and run:
rsvg-convert -w 1024 logo.svg -o logo.png-w 1024sets the output width to 1024px (height scales to match).- Add
-b whiteif you want a white background instead of transparency.
Tested with the example code: this rendered the gradient, white circle, and "WREN" text correctly at 1024×1024, with a transparent background. rsvg-convert is the cleanest command-line SVG renderer — it's also what most other converters call internally. Inkscape works the same way if you already have it: inkscape logo.svg --export-type=png --export-filename=logo.png -w 1024.
Method 3: An online converter
If you don't want to save files or open a terminal, our free SVG to PNG converter accepts your SVG, lets you choose a size, and hands back a PNG with the transparency preserved — all in the browser. It's the fastest option when you just need one image and don't want to set anything up.
A few things that trip people up
- Fonts. The browser and
rsvg-convertrender with fonts installed on the system. Common fonts like Arial or Helvetica are safe. A custom web font won't render unless it's embedded in the SVG — so for logos, convert text to paths in a vector editor first, or stick to system fonts. - External references. If your SVG points to an external image or stylesheet by URL, the browser may refuse to export it for security reasons (a "tainted canvas"). Inline everything, or use the Terminal method.
- Missing width/height. Some SVG snippets only have a
viewBoxand nowidth/height. Browsers then guess a default size. Add explicitwidthandheight(or a-wflag in the Terminal) so you control the output resolution.
Frequently asked questions
How do I get a high-resolution PNG from SVG code?
Scale up before you rasterize. In the browser tool, set the scale to 4 or 5; on the command line, use a large -w value like -w 2048. Since the source is a vector, there's no quality loss going bigger — only going smaller and then enlarging.
Will my PNG have a transparent background?
Yes, unless your SVG code draws a background. Both the browser method and rsvg-convert output transparency by default. To force a solid background, add a filled <rect> behind your artwork, or use -b white with rsvg-convert.
The text in my SVG didn't show up. Why?
Almost always a font issue — the SVG referenced a font that isn't installed or embedded. Switch to a common system font (Arial, Helvetica, Georgia) or convert the text to vector paths before exporting.
Can I convert SVG code to PNG without any tools?
Yes — the browser method needs only a browser and a text editor. Save the HTML file, paste your code, click convert. No install, no account, no upload.
Starting from scratch?
If you're generating SVG code for a logo, it's often faster to start from a finished design than to hand-tune markup. You can create a logo with AI and export both PNG and SVG directly — no code required — then use any of the methods above whenever you need a different format or size.
作者
分类
更多文章
Best PNG to SVG Converters in 2026: 7 Tools Compared (Honestly)
The 7 best PNG to SVG converters in 2026, compared on what matters: real tracing vs. embedding, color fidelity, free downloads, and account requirements.
How to Convert SVG to PNG on Mac (5 Free Ways, Tested)
Five ways to convert an SVG to PNG on a Mac — using built-in tools with no install, plus free apps. Every method was tested on macOS, with the exact commands and settings.
How to Convert PNG to SVG in Inkscape (2026 Step-by-Step)
A step-by-step guide to converting a PNG to SVG in Inkscape using Trace Bitmap — including single-color vs. full-color tracing, cleaning up the result, and saving a real vector file. Tested in Inkscape 1.4.