Exporting SVG: choosing the right PNG size
SVG scales to any size, but PNG is a fixed grid of pixels. Export at the largest size you may need so the raster stays sharp wherever it is used.
SVG scales, PNG does not
An SVG stores shapes and coordinates, so it can be drawn at any size without losing sharpness. A PNG stores a fixed number of pixels, so enlarging it softens the image.
When a platform needs PNG instead of SVG, the export size decides how large the image can appear before it looks blurry.
Working out the pixel size you need
Decide the largest size the image will be displayed at, then multiply by a factor that accounts for high-density screens. A logo shown at 200 pixels wide on a phone screen needs roughly 400 pixels of source to stay sharp.
If the artwork will also be printed, work from the print size instead: multiply the intended width in inches by at least 150 to 300 to get the pixel width the PNG needs. Without a calculation, exports tend to be either needlessly heavy or visibly soft.
Pick a size that covers the largest use
Think about the biggest place the image will appear — a hero banner, a printed poster, or a high-resolution screen. Export at least that large so the PNG never needs to be scaled up.
For logos and icons, exporting at two times the largest display size gives a crisp result on high-density screens while keeping the file manageable.
High-density screens and retina displays
Modern phones and laptops pack two or three device pixels into every layout pixel. A PNG exported at the layout size alone will look soft on those screens, which is why exporting at two times the largest display width is a common rule.
Beyond about three times the display size the extra pixels add file size with no visible benefit, so there is little reason to export larger than that.
Controlling the size of the exported PNG
If the PNG is too heavy, reduce the export dimensions before anything else: dimension has the strongest effect on file size, and PNG has no quality slider to lower. Simplifying unnecessary detail in the source artwork also helps.
A lossless PNG of a complex illustration can still be large. In that case a high-quality WEBP export is often smaller while keeping the same sharp edges.
Backgrounds and transparency
SVG artwork usually has a transparent background, and PNG preserves that transparency, which is exactly what you want for a logo placed on different colours. If the image will only ever sit on one background, the PNG can also be exported flat.
Flattening onto the final background colour avoids a white or black edge appearing around the artwork later. Decide the destination first, then export once with the right background.
PNG or JPG for the export
Most SVG artwork contains sharp lines, flat color, and often transparency, which points to PNG. The lossless format keeps those edges clean.
Use JPG only for vector artwork that is essentially photographic, such as exported illustrations with smooth gradients and no transparency.