SVG is a vector format: it describes shapes, not pixels, so a logo or icon stays sharp at any size. That makes it ideal for websites and design files. Many places still want a plain image though. Social networks, marketplaces, email signatures, slide decks and print forms ask for PNG or JPG. Converting is easy when you can choose the exact size, because a vector can be rendered at 512 pixels or 5,000 pixels with the same crisp edges.
This converter reads each SVG, works out its own size, then redraws it in your browser at the size you ask for. The PNG keeps transparency unless you add a background color. Nothing is uploaded.
How to convert SVG to PNG
- Drop one or more .svg files into the box, or click it to choose them. To convert code you copied from a design tool or icon library, open Or paste SVG code, paste it and click Add this SVG.
- Under Size by, pick how to size the output (the options are explained below).
- Choose Transparent or Color for the background.
- Pick PNG, or JPG or WebP if you need those.
- Click Convert, check the size shown on each row, and download single files or a ZIP.
Each output name includes its pixel size, such as logo-1024x512.png, which helps when you export several sizes of the same file.
The four ways to set the size
| Option | What it does | Good for |
|---|---|---|
| Scale 1x, 2x, 3x, 4x, 8x | Multiplies the SVG's own width and height | Retina and high density screens, app assets, quick exports |
| Width | Sets the width in pixels; height follows the shape | Website images and banners with a fixed column width |
| Height | Sets the height in pixels; width follows the shape | Logos for headers and email signatures that need a set height |
| Exact width and height | Makes a canvas of that size and centers the drawing inside without stretching | Social images, app icons, marketplace thumbnails, with optional padding |
The SVG's own size comes from its width and height attributes. Units such as inches, points and millimeters are converted at the web standard of 96 pixels per inch, so a file marked 2in by 1in is 192 by 96 pixels at 1x. If the SVG only has a viewBox, that sets the size. If it has neither, the converter falls back to 300 by 150 pixels, the browser default, and says so on the row.
Picking a size that looks sharp
1x, 2x and 4x for screens
Phones and most laptops have high density screens that show two or three device pixels for every CSS pixel. A logo shown at 200 pixels wide on a web page looks soft from a 200 pixel PNG on those screens. Export at 2x (400 pixels) for normal use, and 3x or 4x for app stores and very sharp displays.
Exact boxes for platforms
Use the exact width and height option when a platform wants a fixed canvas. Examples: 1200 by 630 for a link preview image, 1080 by 1080 for a square social post, or 512 by 512 for an app or store icon. Add 5 to 15 percent padding so the logo does not touch the edges, and choose a background color when the platform does not show transparency well.
App and store icons
App stores and marketplaces usually want square PNG icons with no transparency at the edges, such as 512 by 512 or 1024 by 1024. Use Exact width and height with a background color and 10 to 20 percent padding, so rounded corners added by the platform do not clip the logo.
For print, multiply the printed size in inches by 300. A logo printed 3 inches wide needs about 900 pixels. Set Width to 900 or more and keep PNG.
Transparent or colored background
Most logos and icons have a transparent background, which PNG keeps. That is what you want for placing the image on a website, in a document or on a product mockup. Pick a background color when:
- The destination shows transparency as black, which some chat apps and older viewers do.
- You need a JPG, which cannot store transparency. The converter fills the background automatically in that case.
- A white logo would vanish on a white page preview, and you want a dark brand color behind it.
What may not convert perfectly
Your browser draws the SVG exactly as it would show it inside an <img> tag. That has a few known limits, and the converter warns about the first one:
- Linked files: images or fonts the SVG loads from a web address are blocked inside images, so those parts are missing. Embedded images (data URLs) work.
- Fonts: text in the SVG uses fonts installed on your device. If the designer used a font you do not have, a similar font is shown. Convert text to outlines in your design tool to avoid this.
- Scripts and animation: scripts do not run, and animated SVGs are captured in their starting state.
- Compressed .svgz files are not supported. Save as plain .svg first.
Tip: Making a site icon? The favicon generator creates every favicon and app icon size from one image, and the brand kit generator builds a matching set of brand images.
Example: one logo, five exports
A store owner has a logo as logo.svg with a viewBox of 240 by 80. Here is how to get every common size in a couple of minutes:
- Scale 2x with a transparent background: 480 by 160 pixels for the website header.
- Height set to 120 pixels: 360 by 120 for the email signature, saved as PNG.
- Exact 1200 by 630 with 10 percent padding and the brand color as background: the link preview image for social shares.
- Exact 1080 by 1080 with 15 percent padding on white, saved as JPG: a square social post or marketplace shop icon.
- Width 900 with a transparent background: a print-ready 3 inch logo at 300 pixels per inch.
Run each setting, download, and the file names already say which size is which.
Troubleshooting
- "This SVG has a code error": the file is not valid XML, often from a missing closing tag after manual editing. Open it in your design tool and export again.
- The PNG is 300 by 150 and looks cut off: the SVG has no width, height or viewBox. Use Exact width and height, or add a viewBox in your editor.
- The output is blank: the shapes may be white on a transparent background. Add a dark background color to check, or open the PNG on a dark background.
- Very large sizes fail: the limit is 16,000 pixels per side and 120 megapixels. Phones may need smaller sizes.
Converting a whole icon set
Icon libraries often come as dozens of small SVG files with the same viewBox, such as 24 by 24. Drop the whole folder in, choose Scale 4x for 96 pixel icons or Width 64 for an exact size, keep the background transparent and convert. Every icon gets the same treatment, and the ZIP keeps the original names with the size added, so cart.svg becomes cart-96x96.png. If the icons use currentColor for their fill, they render black, because there is no surrounding text color inside an image; set a fill color in the SVG first if you need another color.
Where PNG beats SVG
SVG is the better format on your own website, where it stays sharp and small. PNG is the safer format almost everywhere else. Social networks such as Instagram and Facebook do not accept SVG uploads, many email clients, including Gmail, do not display SVG images, and office apps and marketplaces handle PNG more reliably. Keep the SVG as your master file and export PNGs at the sizes each place needs.
If you are building niche sites, AM Jarvis's AI Site Builder sets up complete sites on your own AI key, and the images you prepare here drop straight into them. For other formats, use the image converter or shrink large PNG files with the image compressor.