Convert a SVG Icon to PNG with IconVectors

This guide shows how to export any SVG icon as a crisp PNG bitmap using Axialis IconVectors. We’ll cover rasterization basics and pixel‑perfect sizing.

Why export an SVG to PNG?

SVG has become the modern standard for using icons in applications and websites. Still, PNG remains widely adopted due to its long history in older technologies for user interface icons. For this reason, you may sometimes need to export an SVG icon as a PNG.

Below are a few key points to keep in mind when working with SVG:

• Rasterization: Since SVGs are vector-based, exporting them to PNG converts them into a pixel grid (raster image). This makes settings such as size and alignment important.
• Scale & clarity: Always export at whole-pixel dimensions (e.g., 24, 48, 96 px) to prevent sub-pixel sampling that can blur strokes.
• Pixel-perfect vs blurred: If paths fall on half-pixels or use odd stroke widths at the chosen size, the result may look soft. For crisp output, export at integer multiples of your design grid (e.g., a 24×24 icon → 24/48/72/96 px).
• Transparency: PNG supports true transparency with alpha PNG (32BPP). Since most user interfaces handle alpha channels, IconVectors exports only in this format, ensuring smooth edges and a visually perfect result.

Step‑by‑step in IconVectors

1. Open, draw, or import an icon.
   • Open existing SVG: File → Open… (Ctrl+O).
   • Create from scratch: New Icon (Ctrl+N), then draw shapes and paths.

   

2. Open the bitmap export dialog: File → Export → Export to Bitmap (Ctrl+F3). This command exports a raster version of your icon and supports many formats, including PNG. (Also available as a batch via Export to Multiple Bitmaps — Shift+F3.)
3. Understand the options in the Export to Bitmap dialog:

   

   • File Format — choose the target bitmap format. For this tutorial, select PNG:
     • PNG — 32BPP RGB/Alpha Channel (keeps true transparency).
   • Image Size — define Width and Height in pixels (or set a Percent). Keep Keep Aspect Ratio checked to avoid distortion.

     Tip
     If your source canvas is 24×24, export at 24, 48, 72, 96… px for pixel‑perfect results.

   • Colors — appears when the chosen format has no alpha channel (not relevant here):
     • Flat RGB Background — the solid background color to composite behind your icon.
     • Flat RGB Transparency — the color to treat as “transparent” (for keyed transparency).
     • Flat RGB Transparency Matt — optional matte color for smoother edges in formats like GIF.
4. Export the PNG — click OK, choose a filename, and save. The result is a standard PNG you can use in app UIs (toolbars, buttons, notifications, stores) and across platforms.

Notes & troubleshooting

• Edges look soft? Export at integer multiples of your design grid and prefer even stroke widths for small sizes.
• Need many sizes? Use File → Export → Export to Multiple Bitmaps (Shift+F3) to generate 1×/2×/3× variants in one go.
• Keep the vector too: PNG is final output; keep the SVG source for future edits.