PNG vs SVG for code images: which format should you export?

Quick answer: Use PNG for anything you share — social media, chat, email, GitHub, slides — because every platform accepts it and it looks identical everywhere. Use SVG for web pages you control, where it stays perfectly sharp at any zoom level. Never use JPEG for code: its compression blurs the edges of letters.

When you export a code image you usually have two options: PNG or SVG. They store the picture in fundamentally different ways, and the right choice avoids blurry text, rejected uploads and surprises when someone opens the file in another app.

Raster vs vector in one minute

• PNG is a raster format. It stores a fixed grid of pixels. Zoom in far enough and you see the squares.
• SVG is a vector format. It stores a description of shapes and text in XML, and the viewer draws it at whatever size it needs. It never pixelates.

That single difference explains almost every trade-off below.

How PNG works — and why it is ideal for text

PNG compresses images losslessly: what you export is exactly what viewers see. It handles sharp edges and flat areas of color extremely well, which is exactly what text and code images are made of. PNG also supports transparency, so a transparent background works.

JPEG, by contrast, was designed for photographs. Its lossy compression creates visible smudges ("artifacts") around high-contrast edges like letters. Code images saved as JPEG look blurry and dirty, and they rarely end up smaller than a well-compressed PNG of flat colors.

Resolution and pixel ratio

Because a PNG has a fixed number of pixels, its sharpness depends on how many of those pixels are available per point on screen. Modern phones and laptops have high-density ("retina") displays with a device pixel ratio of 2 or 3: they pack two or three physical pixels into each CSS pixel in each direction.

An image exported at exactly its display size therefore looks soft on those screens. The fix is to export at a higher pixel ratio:

Frame width	Export at 1×	Export at 2×	Export at 3×
700 px	700 px wide — soft on retina	1,400 px wide — crisp on most screens	2,100 px wide — crisp everywhere, larger file

2× is the sweet spot for most uses. It looks sharp on high-density screens and survives the recompression that most social platforms apply to uploads. Codeshot exports PNGs at 2× by default.

How SVG works — and its catch

An SVG stays perfectly sharp at any size and any screen density, and for short snippets it is often smaller than a high-resolution PNG.

There is a nuance that matters for code images created in a browser. Many tools — Codeshot included — produce the SVG by wrapping the rendered HTML inside an SVG <foreignObject> element. Web browsers display these perfectly. Some other applications, including certain design tools, image editors and document converters, do not support <foreignObject> and may show a blank or incomplete image.

So: SVG is excellent in browsers, unpredictable elsewhere. If you plan to edit the image in a design tool, test the SVG there first, or use the PNG.

Two more SVG considerations:

• Fonts. An SVG that references a font by name renders with a fallback if the viewer does not have that font, unless the font is embedded.
• Uploads. Most social networks and many content management systems do not accept SVG uploads at all, partly because SVG files can contain scripts.

PNG vs SVG at a glance

	PNG	SVG
Sharpness when zoomed	Limited by resolution	Perfect at any size
Looks identical everywhere	Yes	In browsers; varies elsewhere
Social media uploads	Accepted everywhere	Generally not accepted
File size	Grows with resolution	Small for short snippets
Transparency	Yes	Yes
Editable afterwards	As pixels only	As text and shapes (in supporting tools)
Selectable text	No	Sometimes, in browsers

Which format to use where

Destination	Format	Why
X, LinkedIn, Bluesky, Mastodon, Reddit	PNG	SVG uploads are generally not accepted
Slack, Discord, Microsoft Teams	PNG (or copy to clipboard)	Inline previews are reliable for raster images
GitHub README, issues, pull requests	PNG	Drag and drop, consistent rendering
Your own website or documentation	SVG or 2× PNG	SVG for perfect scaling; PNG for maximum compatibility
Keynote, PowerPoint, Google Slides	PNG	Predictable rendering; export at the size you need
Print	High-resolution PNG (3× or more)	Predictable output at a known physical size
Email newsletters	PNG	Many email clients do not render SVG

What about WebP and AVIF?

WebP and AVIF are modern formats with better compression than PNG, and both have a lossless mode. They are excellent for images on your own website, served by your own build pipeline. For files you upload to other platforms, PNG remains the safest choice: support for uploading WebP and AVIF varies, and many platforms convert uploads anyway.

Tips for sharp results in any format

• Size the frame for the destination. A narrower frame with larger text holds up better when a platform scales it down.
• Never upscale a small PNG. Enlarging pixels adds blur, not detail; re-export at the size you need.
• Avoid screenshots of screenshots. Every recapture and recompression loses detail.
• Copy to the clipboard for chat apps. It pastes a PNG directly, without saving a file.
• Keep the source. Save the text of your snippet so you can re-export at a different size later.

The bottom line

PNG is the dependable choice for sharing; SVG is the precise choice for pages you control. Most people will want PNG for the vast majority of their images. Try both in the code to image generator or the performance metrics tool and compare them where you plan to publish. For tips on making the content itself readable, see the code screenshot best practices.

Frequently asked questions

Is PNG or SVG better for code screenshots?

PNG is better for sharing because every platform accepts it and it renders identically everywhere. SVG is better on your own web pages, where it stays sharp at any zoom level.

Why does my code image look blurry?

Usually because it was exported at 1× and viewed on a high-density screen, was saved as JPEG, or was upscaled after export. Export a PNG at 2× resolution at the size you need.

Can I upload SVG images to Twitter or LinkedIn?

Generally no. Most social networks accept raster formats such as PNG, JPEG and GIF, not SVG. Export a PNG for social media.

What resolution should I export code images at?

2× the display size is the best balance for screens: sharp on high-density displays without huge files. Use 3× or higher for print.