When You Still Need PNG From SVG Assets

SVG is the right default for website icons and logos because it stays sharp at any zoom. PNG is still required where a platform blocks SVG or can only draw pixels: email signatures, Open Graph cards, slide decks, app icons, and CMS fields that reject .svg for security. Rasterizing locks the resolution, so export at 2x the display size and keep the SVG. If you already have a large PNG, Resize Image makes the smaller placements and Compress Image cuts the byte size. When the card does not need a transparent background, PNG to JPG is the lighter file. Scaling a small PNG up later blurs it. Go back to the SVG for a larger export.

Put an .svg logo in an HTML email signature and desktop Outlook renders a broken-image box. Set an .svg as your og:image meta tag and Slack, LinkedIn, and X ignore it.

Where SVG fits, and where PNG is required

| Channel / placement | Use SVG? | Required format and why | | --- | --- | --- | | Website navbar and inline UI icons | Yes | Crisp at every zoom level; CSS-themeable | | HTML email signatures and newsletters | No | PNG or JPG. Outlook, Gmail, and Apple Mail block or strip SVG differently | | Open Graph (og:image) and Twitter cards | No | PNG or JPG (1200×630). Social crawlers do not rasterize SVG (OG Image Sizing) | | Apple touch icons and PWA manifest icons | No | PNG (180×180, 192×192, 512×512). See Favicon Format Sizes | | User-generated avatar uploads | No | PNG, JPG, or WebP. Raw SVG can contain <script> XSS payloads | | Legacy slide decks and Word templates | Caution | PNG at 2x to 3x avoids missing-font and filter bugs across Office versions |

What pixel size to export from your SVG master

Because rasterizing locks the resolution, export at 2x the intended display size for Hi-DPI and retina screens:

| Intended display size | Recommended PNG export | Notes | | --- | --- | --- | | 24 × 24 px UI or email icon | 48 × 48 px PNG | Set width="24" height="24" in HTML | | 160 × 40 px email signature logo | 320 × 80 px PNG | Keeps curves crisp on mobile mail apps | | 180 × 180 px apple-touch-icon | 180 × 180 px PNG | Opaque background recommended by iOS | | 1200 × 630 px Open Graph card | 1200 × 630 px PNG/JPG | Exact crawler dimensions |

A 32px icon becomes a 64px PNG. A 1200px Open Graph image can be scaled down from a 2400px source if you exported the large master first. If you already exported a high-resolution master PNG (for example, 2400 px wide) from Figma or Illustrator, generate the smaller placement sizes in Resize Image and shrink the byte weight in Compress Image.

Logos on the website itself can stay SVG when the browser supports them, so they stay sharp at every size. Keep PNG copies for email signatures, press kits, and upload forms that block SVG for security.

Step-by-step SVG-to-PNG production workflow

1. Convert text to outlines in your SVG before exporting if the logo uses a custom brand font that might not be installed on the build machine.
2. Check alpha transparency. Decide whether the PNG needs a transparent background (PNG Transparency Web Usage) or a solid card fill. If transparency is not needed on a heavy card, convert to JPG in PNG to JPG.
3. Export at 2x pixel dimensions from your vector editor or CLI (inkscape logo.svg --export-type=png --export-width=640).
4. Name each derivative by channel and width (brand-logo-email-320w.png, brand-logo-og-1200w.png). See Batch Image Convert Naming.

Design-tool export, the Inkscape command above, or browser canvas rasterization will all produce the PNG. If the output still needs a smaller box or a smaller file, resize and compress after that export. Start from the crisp SVG, not from a screenshot.

Limitations

Upscaling a small PNG later causes blur. If you export a 64×64 PNG and later stretch it to 512×512 on a slide, it will pixelate. Go back to the .svg master to export the larger size. Do not overwrite or delete that master.

Untrusted SVG files are a security risk. SVG is an XML document that can embed JavaScript (<script>, onload) and external entity references. Never accept raw .svg uploads from untrusted users without server-side sanitization and sandboxed rasterization. That is why avatar fields ask for PNG, JPG, or WebP instead.

CSS variables and external web fonts do not travel with the file. An SVG that relies on page-level CSS custom properties (fill: var(--primary)) or an external @font-face stylesheet will render in plain black, or in a fallback font, when it is rasterized outside the browser. Inline hex colors and convert text to paths before exporting PNGs.

Conclusion

Keep the SVG as the single source in the design repo and use it directly in browser UI. Export 2x PNG derivatives for email signatures, social share cards, touch icons, and third-party upload forms.