SVG is resolution-independent, but the PNG you export from it is not. If an icon looks soft in a slide, email, or app store screenshot, the problem is often the export size rather than the SVG file.
Start with the final display size
Decide where the PNG will appear before converting. A 24 × 24 icon displayed at 48 × 48 pixels will be stretched. Export at the actual display dimensions, or at 2× for a high-density screen. Avoid enlarging an already exported PNG.
Check the SVG canvas
Look at the viewBox, width, and height. A large empty viewBox can make the artwork appear tiny even when the PNG dimensions are correct. If the art touches the edges, allow a little padding so strokes do not get clipped.
Choose the background intentionally
Transparency is useful for UI icons and overlays. For documents and social images, a solid background may be safer because some viewers show transparent areas as black or gray. Check white artwork on both light and dark backgrounds.
Test at the destination size
Open the exported PNG at 100% and place it in the real destination. Thin strokes and small text may need adjustment in the SVG itself. Exporting a huge PNG cannot fix a design that becomes unreadable when displayed at 16 pixels.
For a quick browser workflow, SVGConvert lets you set output dimensions and choose a transparent or solid background. It also has a batch converter for sets of SVG files. For files that need manual editing first, a desktop vector editor is usually the better starting point.
My export checklist: final pixel size, viewBox and padding, background, then a 100% preview in the target app. That catches most blurry or clipped results before delivery.
Top comments (0)