SVG to PNG Converter

Where SVG to PNG conversion shows up every day

The most common case is a logo. A designer hands over a vector file, and it has to land in a slide deck, in an email to a client, in a product listing or in a chat message. Interface icons come next: someone asks you to send one for a pricing table, for a label in a CRM, or for a set of banners. Third is the link preview, since many platforms do render an SVG preview but still want an ordinary file when you paste a link into a chat or an email. Fourth is documents and spreadsheets, where SVG cannot be inserted but an image always can.

A worked example: preparing a logo icon as a PNG in two steps. Take the SVG file from the project assets or from the source of the site and paste its code into the converter. Look at the line showing the source size: if it reads 512 × 512, choose the 2× preset, and the output becomes a 1024 × 1024 PNG that looks equally sharp on a standard monitor and on a retina screen. Press "Convert to PNG", download the file and keep it next to the source. If the SVG had no size attributes at all, the converter suggests the size from the viewBox and the multiplier works out the second side from the proportions, so 24 × 24 becomes 48 × 48. The fill colour stays in the code, and it is worth settling it in advance with the colour picker.

There is a special case worth knowing about: artwork that arrived from somewhere else. A foreign SVG may point at an image or a font over a remote URL, and nothing will load during rendering, which leaves a blank space in the picture. The converter removes such references before rendering and lists everything it stripped, so you can check the result with your own eyes before sending it on. When the artwork has to be embedded in a page as text rather than as a file, encoding the image as Base64 is the next step.

• Logos and icons for emails, decks and pricing tables
• Link previews in messengers and social networks
• Pictures inside documents, spreadsheets and reports
• Avatars and covers where SVG is not accepted
• Raster drafts prepared for print and large-format output
• Preview images ready to be uploaded to a hosting account

Mistakes that cost time

The most common mistake is assuming a PNG stays sharp no matter how far you enlarge it. A raster works differently: it remembers exactly the pixels that were written. If the artwork is destined for a large screen or for print, export a version at 2× up front instead of stretching a finished file later. The second mistake is overshooting the size. The file gets heavier, the upload slows down, and the gain in on-screen quality is usually invisible.

The third mistake is forgetting about external resources. If an SVG references an image, a font or a CSS file, none of it loads during rendering, because the page makes no network requests. The icon ends up unfilled or the text switches to a system font. Such references have to be embedded into the SVG itself or the file has to be made self-contained beforehand. The fourth mistake is not looking at the preview: the converter shows the source and the finished PNG side by side, and any difference is obvious at a glance.

Finally, there is the security angle. An SVG pasted straight into a page can carry a script or an event handler. Here the code is cleaned first — script, foreignObject, on* handlers, javascript: links and remote resources are all removed — and the picture is drawn through an img element where code does not execute. That keeps outside requests from happening and leaves the page safe.

• A raster cannot be enlarged cleanly — export with headroom instead
• An oversized file costs bandwidth without visible benefit
• External fonts and images inside an SVG do not load during rendering
• Text in an SVG may change font if the font is not embedded
• A stretched logo is the result of turning proportions off
• Scripts and remote links from a foreign SVG are removed automatically

The conversion, step by step

Step one is parsing. The SVG is read with an XML parser and three things are pulled from the root element: the width and height attributes, the viewBox attribute and the optional xmlns declaration. When width or height is expressed in other units — points, millimetres or inches — the value is converted to pixels at the standard rate of 96 pixels per inch. If the dimensions are missing altogether, the viewBox provides them, and without a viewBox the converter proposes 512 × 512.

Step two is cleaning. Everything that should not reach a browser is taken out: script and foreignObject elements, on* attributes, javascript: URLs, remote resources and dubious styles. Step three prepares the artwork for painting by assigning the target size to the root and synthesizing a viewBox when needed, so the content scales rather than being cropped. Step four is the canvas render itself, and step five produces the PNG, ready to download or copy.

Every stage runs in the browser: the source code is never uploaded, and the PNG is assembled on your own device.

SVG, PNG and the rest: picking the right format

The choice usually comes down to one question: where will the picture live? On a site, inside an app, or in a document that will outlive the current design, use SVG — it does not depend on the screen, weighs little and stays sharp at any size. In a conversation, in an email, in a product card, in a link preview, use PNG: every program accepts it and it looks the same everywhere. Photographs and busy canvases are a different case entirely, where JPEG or WebP is the only sensible answer because PNG spends bytes wastefully on continuous tone.

WebP and AVIF deserve a line of their own: they compress better than PNG at the same quality and every current browser handles them, but not every editor and chat client does. When a file is headed for an unknown environment, PNG stays the most compatible choice. A placeholder image at the target size is a quick way to see how the frame will look. More on sizes and proportions lives in the guide to screen aspect ratios, and a finished picture can be squeezed further with the image resizer.

• Logo and icon on a website — SVG, it never loses quality
• Icon in a retina interface — PNG at 2×, so 48 × 48 out of 24 × 24
• Photograph — JPEG or WebP, a raster is the only sensible format
• Screenshot or diagram with text — PNG, it holds edges cleanly
• Link preview — PNG at 1200 × 630, the size every platform understands
• Cropping a finished picture is easier with a dedicated image cropper