Paste SVG Code, Get PNG — Convert Inline SVG Markup to an Image

If you have SVG markup in your clipboard — from Figma's "Copy as SVG", from GitHub's icon library, from your React component source, from Chrome DevTools — you do not need to save it to a file first. Paste the markup directly into the SVG code box, click Convert, get a PNG. The whole thing takes about five seconds.

This is the fastest path for developers and designers who live in code, and it avoids the annoying save-as-file dance that most converters require.

Five places SVG markup lives, and how to grab it

1. Figma — right-click a frame or component, pick "Copy as" → "Copy as SVG". Paste directly into our code box.
2. GitHub icon repos (Lucide, Heroicons, Feather, Tabler) — open the icon page, click the Copy SVG button. Paste and convert.
3. Chrome / Firefox DevTools — right-click an inline SVG on any page, pick "Edit as HTML", copy the markup. Works for any SVG on any website.
4. React / Vue source code — copy the SVG JSX out of a component file. Remove any className or camelCase attributes (our converter reads them but browsers are stricter).
5. Illustrator, Sketch, Affinity — export as SVG, open the .svg file in a text editor, copy the contents.

Paste to PNG in four steps

1. Click the Paste Code tab above the upload zone.
2. Paste your markup (Ctrl+V / Cmd+V). The preview updates live — if the preview is blank, the SVG has a missing viewBox or a positioning issue (see the next section).
3. Pick scale (1x, 2x, 4x) and background (Transparent, White, Custom).
4. Click Convert & Download. The PNG downloads with a filename based on the first <title> tag if present, otherwise a timestamp.

Your markup stays in the browser tab — nothing gets posted to a server.

Sell Custom Apparel — We Handle Printing & Free Shipping

If the preview is blank, check these three things

1. Missing viewBox. The root <svg> tag needs a viewBox attribute, or explicit width and height. Without either, the browser has no idea what size to render at. Add viewBox="0 0 24 24" for a standard icon.
2. Namespaces stripped. SVG pasted from some tools is missing the xmlns="http://www.w3.org/2000/svg" attribute. Add it to the root svg tag. Without it, many browsers refuse to render.
3. currentColor fill with no parent color. Heroicons and Lucide SVGs often use fill="currentColor" or stroke="currentColor", which inherits from the CSS color property. When there's no parent, the color defaults to black. Replace currentColor with an actual hex value if the icon isn't showing.

Two paste patterns you will hit a lot

The full SVG document — starts with <?xml version or <!DOCTYPE svg>, contains a root <svg> element. Paste the whole thing.

The bare SVG snippet — just the <svg>...</svg> block, no XML preamble. Works fine too. Our tool wraps it in a valid XML document before rasterizing.

What doesn't work: pasting just the inner children (<path>, <circle>) without the surrounding <svg> wrapper. The browser has nothing to render against.

Going PNG → SVG is a different problem

This tool converts SVG to PNG. Going the other way — PNG or JPG to SVG — is a completely different operation called "vectorization" or "tracing", and the results depend heavily on the source image. A flat two-color logo traces cleanly; a photograph does not.

We don't offer raster-to-vector tracing. If you need it, the typical free workflow is: open in Inkscape → Path → Trace Bitmap. Online options include vectorizer.io and Adobe Express (paid tier for high-quality output). Be aware that the resulting SVG is usually a pile of Bezier approximations, not crisp geometry — re-editing is painful.

If you have Figma or Illustrator files and just need the SVG source, export as SVG first, then paste into this tool to rasterize. That path is clean.

Frequently Asked Questions

How big can the pasted SVG be?

The paste box handles up to around 2MB of SVG markup in Chrome and Firefox. For most icons and logos this is thousands of times more than needed. If you hit a limit, save the SVG to a file and use the file upload instead.

Can I paste multiple SVGs at once?

Not directly — the code box accepts one SVG document per conversion. To convert several, paste and export one at a time, or save them to files and upload them through the file picker.

Why does my Heroicon look thinner than expected?

Heroicons use stroke-based rendering with stroke-width="1.5" on a 24×24 viewBox. When you scale up, the stroke stays proportional to the viewBox, not the output. Increase stroke-width to 2 or 2.5 before converting if you want a thicker line at large sizes.

Is my SVG code sent anywhere?

No. The markup stays in the textarea and gets rasterized by the browser locally. There is no fetch, no POST, and no analytics on the content itself.