The latest articles on DEV Community by Zero (@zeroiou). https://dev.to/zeroiou https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3334671%2Fdf1a8b4e-3d6b-4ecc-baaa-ef545de4ecc6.jpeg https://dev.to/zeroiou en Zero Thu, 24 Sep 2026 01:39:04 +0000 https://dev.to/zeroiou/why-svg-exports-look-blurry-a-practical-png-checklist-3f59 https://dev.to/zeroiou/why-svg-exports-look-blurry-a-practical-png-checklist-3f59 <p>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.</p> <h2> Start with the final display size </h2> <p>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.</p> <h2> Check the SVG canvas </h2> <p>Look at the <code>viewBox</code>, 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.</p> <h2> Choose the background intentionally </h2> <p>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.</p> <h2> Test at the destination size </h2> <p>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.</p> <p>For a quick browser workflow, <a href="https://svgconvert.org/" rel="noopener noreferrer">SVGConvert</a> lets you set output dimensions and choose a transparent or solid background. It also has a <a href="https://svgconvert.org/batch-svg-to-png" rel="noopener noreferrer">batch converter</a> for sets of SVG files. For files that need manual editing first, a desktop vector editor is usually the better starting point.</p> <p>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.</p> webdev design