# How to convert SVG to PNG: pick the right size, keep the background transparent, and fix missing fonts

> A logo that is a crisp SVG on your website but will not upload to a form, an invoice or an app store. Here is how to turn it into a sharp PNG at exactly the size you need, when to add a background colour, and why text and pictures sometimes vanish.

Published 2026-10-23 by Toolcloak. 5 minute read. Original: https://toolcloak.com/articles/how-to-convert-svg-to-png-pick-the-right-size-keep-the-background-transparent-and-fix-missing-fonts
Related free tool: [SVG to PNG Converter](https://toolcloak.com/tools/svg-to-png-converter)

SVG is wonderful for logos and icons because it is made of shapes, not dots. It stays sharp at any size and the file is tiny. The trouble is that many places simply do not accept it: government and exam portals, WhatsApp profile pictures, invoice software, app store forms, slide decks on older machines. They want a PNG or a JPG. Converting is easy, but a few choices decide whether the result is crisp or fuzzy, transparent or ugly white, complete or missing its text.

> **In short**
> - In [SVG to PNG](https://toolcloak.com/tools/svg-to-png-converter), choose your SVG, pick a **scale (1×, 2×, 4× or 8×)** and download the PNG.
> - The PNG is the SVG’s own size **times the scale**. A 256 px logo at 4× becomes 1,024 px.
> - The background is **transparent** unless you switch on **Add background colour**.
> - SVGs that rely on **outside fonts or linked pictures** may lose them. Convert text to outlines first.
> - Everything runs **in your browser**. The file is not uploaded.

## SVG against PNG in one minute

An SVG describes a picture with instructions: “draw a circle here, a curve there”. A PNG stores the finished picture as a grid of coloured dots. Instructions can be redrawn at any size with no loss. A grid of dots has a fixed size, and stretching it later makes it blurry. That is why you must choose the size **when you convert**.

**Why the size must be chosen up front**

| SVG | PNG |
| --- | --- |
| Any size, always sharp | One fixed size |
| Redrawn from shapes each time | A grid of coloured dots |
| Tiny file, even for a large logo | Blurs if stretched beyond its size |
| Not accepted by every site or app | Accepted almost everywhere, supports transparency |

*If you may need the picture larger later, keep the SVG as your master copy and make PNGs from it as needed.*

## How to convert SVG to PNG, step by step

1. Open the [SVG to PNG Converter](https://toolcloak.com/tools/svg-to-png-converter).
2. Choose your SVG file, or drop it onto the box.
3. Pick the **Scale**: 1×, 2×, 4× or 8×. It starts at 2×.
4. Leave **Add background colour** off for a transparent PNG, or switch it on and pick a colour.
5. Check the preview. The size in pixels is shown under it. Press **Download image**.

Try it: [SVG to PNG Converter](https://toolcloak.com/tools/svg-to-png-converter). Choose an SVG, pick a scale, and download the PNG.

Because the output is a PNG, the file keeps sharp edges and a clean transparent background, which is exactly what logos and icons need. The preview updates as you change the scale or the background, so you can see the result before you save.

## Choosing the scale

The scale multiplies the SVG’s own width and height. So the first thing to know is the SVG’s base size, which is shown in the tool once you open the file. The table shows what you get from a few common bases.

| SVG base size | 1× | 2× | 4× | 8× |
| --- | --- | --- | --- | --- |
| 24 × 24 (small icon) | 24 px | 48 px | 96 px | 192 px |
| 100 × 100 | 100 px | 200 px | 400 px | 800 px |
| 256 × 256 (logo) | 256 px | 512 px | 1,024 px | 2,048 px |
| 512 × 512 | 512 px | 1,024 px | 2,048 px | 4,096 px |

*Each step up doubles both the width and the height, so a 4× PNG holds 16 times as many pixels as a 1× one.*

**Pixels in the PNG for a 256 × 256 SVG (thousands of pixels)**

|  | Value |
| --- | --- |
| 1× | 66k |
| 2× | 262k |
| 4× | 1.05M |
| 8× | 4.19M |

*More pixels mean a bigger file and more memory. Choose the smallest scale that meets your need.*

**Pick by where it is going**

| Box | What it means |
| --- | --- |
| A web page or an email | Use **2×** of the display size, so it looks crisp on high-resolution screens. |
| An app icon or store listing | Check the exact size asked for, often 512 or 1,024 px, then choose the scale that reaches it. |
| A print or a banner | Go to **4× or 8×** from a small SVG, or use a bigger SVG as the base. |
| A form with a size limit | Convert at 1× or 2×, then trim the file size with the [Image Compressor](/tools/image-compressor). |

*If a form needs an exact file size in kilobytes, see [how to compress an image to 20, 50, 100 or 200 KB](https://toolcloak.com/articles/how-to-compress-an-image-to-20-kb-50-kb-100-kb-or-200-kb-for-forms-and-exam-portals).*

The tool stops you if the picture would be absurdly large, around 160 million pixels, and asks you to choose a smaller scale. That protects a phone from running out of memory. For a normal logo you will never come close to it.

## Transparent background, or a colour?

By default the PNG has a **transparent** background, so whatever sits behind it shows through. That is perfect on a website or a coloured slide. It can look wrong in two places: a viewer that paints transparency black, and a white-on-transparent logo placed on a white page, where it simply disappears.

| Situation | Use |
| --- | --- |
| Logo over photos, coloured slides or a dark website | Transparent (switch the background option off) |
| A form or portal that turns transparent areas black | Switch on **Add background colour** and choose white |
| A white logo for dark backgrounds | Keep it transparent, and check it on a dark page |
| A profile picture that must be a filled square | Add a background colour that matches your brand |

The background colour is chosen with a colour picker, so you can type or pick any shade. To match a brand colour exactly, take the hex value from the logo and enter it. If you need to find or convert a colour code, read our guide on [HEX, RGB and HSL](https://toolcloak.com/articles/hex-rgb-and-hsl-three-ways-to-write-the-same-colour).

## When text or pictures go missing

The tool draws the SVG the way your browser would show it as a picture. In that mode, an SVG cannot reach out to the internet or to fonts installed elsewhere. This is a browser rule, and it explains the two most common problems.

**The two usual surprises**

| Text in the wrong font | A picture goes blank |
| --- | --- |
| Font fallback | Missing image |
| The SVG names a font that is not on this device | The SVG links to a picture on another site |
| A plain default font is used instead | Linked images do not load inside an SVG shown as a picture |
| Spacing and shape change, sometimes the text overflows | A blank box or a gap appears |

*Both have one cure: put everything the SVG needs inside the file itself.*

- **Convert text to outlines** (or “curves”) in your design software before you export the SVG. The letters become shapes and need no font.
- **Embed pictures** in the SVG instead of linking them, so they travel with the file.
- **Add width and height** to the SVG. If it has none, the browser may not report a size and the tool falls back to a base of 512 px, which may not be what you intended.
- **Keep it small.** A heavy SVG from a design export can be trimmed with the [SVG Optimizer](https://toolcloak.com/tools/svg-optimizer) before you convert.

> **Always check the preview:** Open the converted picture before you upload it anywhere. Look at the text, the edges and the background. It takes ten seconds and saves a rejected upload.

## Other conversions you may need next

A PNG is the right format for logos, icons and anything with sharp edges or transparency. For photos, JPG is smaller. If a site wants JPG or WEBP, the [Image Converter](https://toolcloak.com/tools/image-converter) switches the format, and our guide on [PNG, JPG and WEBP](https://toolcloak.com/articles/how-to-convert-png-to-jpg-jpg-to-png-and-webp-to-jpg-and-which-image-format-to-use) explains which one to pick. To set exact pixel dimensions, use the [Image Resizer](https://toolcloak.com/tools/image-resizer) and read [how to resize without stretching](https://toolcloak.com/articles/how-to-resize-an-image-to-exact-pixels-or-a-percentage-without-stretching-or-blurring-it). For a website icon, the [Favicon Generator](https://toolcloak.com/tools/favicon-generator) builds the sizes browsers expect.

Going the other way, from a photo to a clean cut-out with a transparent background, is a different job: see [how to remove a background](https://toolcloak.com/articles/how-to-remove-a-background-from-a-photo-and-save-a-transparent-png-what-works-and-what-does-not).

## Frequently asked questions

### How do I convert SVG to PNG?

Open the SVG to PNG Converter, choose your SVG file, pick a scale such as 2× or 4×, and press Download image. The PNG is the SVG’s own size multiplied by the scale, and the background is transparent by default.

### svg ko png mein kaise badle?

SVG to PNG Converter kholiye, apni SVG file chuniye, scale chuniye jaise 2× ya 4× aur Download image dabaiye. Background by default transparent rehta hai. Chahein to Add background colour on karke rang chun sakte hain.

### How do I get a high-resolution PNG from an SVG?

Use a higher scale. The tool offers 1×, 2×, 4× and 8×, and each step doubles the width and height. A 256 px SVG at 4× gives a 1,024 px PNG with sharp edges, since the SVG is redrawn at that size.

### Can I keep the background transparent?

Yes. A transparent background is the default. Switch on Add background colour only if you want a filled background, for example white for a form that shows transparent areas as black.

### Why is the text in my PNG a different font?

An SVG shown as a picture cannot use fonts installed elsewhere, so the browser falls back to a default one. Convert the text to outlines before exporting the SVG, and the letters will keep their shape.

### Why is a picture missing from my converted SVG?

Pictures linked from another website do not load when an SVG is shown as an image. Embed the picture inside the SVG file itself, then convert again.

### What size will the PNG be?

It is the SVG’s width and height times the scale you pick, and the exact size in pixels is shown under the preview. If the SVG has no width and height, the tool uses 512 px as the base.

### Is it safe to convert an SVG online?

It is safest when the file stays on your device. The SVG to PNG Converter works in your browser, so your file is not uploaded.