← Back to Blog

How to Convert SVG to PNG (With Custom Sizes and DPI)

SVG is perfect for scalable graphics. But favicons, social media images, email templates, and app icons need rasterized PNGs at specific sizes. Here is how to convert with full control over dimensions, DPI, and transparency.

Vector vs raster: why the difference matters

SVG (Scalable Vector Graphics) describes images using mathematical shapes: lines, curves, rectangles, and text defined by coordinates. You can scale an SVG to any size without losing sharpness. A logo that is 100px wide looks identical at 10,000px wide. The file size stays the same regardless of display size because the data is just a set of instructions, not pixels.

PNG (Portable Network Graphics) is a raster format. It stores a grid of pixels, each with a color value. A 512x512 PNG contains 262,144 pixels. Scale it up to 2048x2048 and it looks blurry because the original pixel data is being stretched. The file size increases with dimensions because more pixels means more data.

Both formats support transparency. SVG uses the fill-opacity and opacity attributes. PNG uses an alpha channel. This makes both suitable for logos, icons, and overlays on variable backgrounds. For an in-depth look at SVG capabilities, see the MDN SVG documentation.

When to convert SVG to PNG

SVG is the better format for most web use cases. But several common scenarios require PNG output.

• Favicons: Browsers support SVG favicons (using <link rel="icon" type="image/svg+xml">), but not all browsers and platforms handle them consistently. Safari on iOS, older Android browsers, and some social media crawlers still need PNG favicons. The standard approach is to provide both: SVG for modern browsers, PNG as a fallback at 32x32 and 180x180.
• Social media images: Open Graph images (og:image), Twitter cards, LinkedIn post images, and Facebook share previews require raster formats. These platforms do not render SVG. You need PNG or JPEG at specific dimensions (typically 1200x630 for OG images).
• Email templates: Most email clients do not render SVG. Outlook, Gmail (web), Apple Mail, and Yahoo Mail all have limited or no SVG support. If you are including a logo or graphic in an email, it must be PNG (or JPEG).
• App icons: iOS and Android app icons must be rasterized PNGs at multiple sizes (from 16x16 up to 1024x1024). Xcode and Android Studio do not accept SVG directly for app icons. You generate a set of PNGs from a single SVG source.
• Documents and presentations: Microsoft Word, PowerPoint, and Google Docs have limited SVG support. Embedded SVGs may render incorrectly or not at all. PNG is the safe choice for documents.
• Print: SVG works well in some print workflows (especially PDF-based ones), but many print services and RIP software expect raster formats. Converting to high-DPI PNG ensures consistent output.
• Game assets and UI sprites: Game engines and some UI frameworks work with raster sprites, not vector files. Converting SVG to PNG at the correct size and scale factor is part of the asset pipeline.

SVG vs PNG: technical comparison

The rule of thumb: keep your source files as SVG. Generate PNG outputs at the sizes you need for specific use cases. This workflow gives you the flexibility of vector editing with the compatibility of raster output.

DPI settings for different use cases

DPI (dots per inch) determines how many pixels represent one inch of the image when printed or displayed on a high-density screen. For screen use, pixel dimensions matter more than DPI metadata. For print, DPI is critical.

When converting SVG to PNG, the DPI setting combined with the SVG's defined viewBox determines the output pixel dimensions. An SVG with a viewBox of "0 0 100 100" (100x100 units) rendered at 72 DPI produces a 100x100 pixel PNG. At 300 DPI, the same SVG produces a 417x417 pixel PNG. Alternatively, you can specify the exact pixel dimensions directly and ignore DPI entirely. For the full specification of SVG viewBox and coordinate systems, refer to the W3C SVG2 Coordinate Systems specification.

Convert with ConvX

convx convert icon.svg --to png --width 512

Renders the SVG at 512 pixels wide. The height is calculated automatically to preserve the aspect ratio. The output PNG has a transparent background (matching the SVG). Check the full set of options in the CLI reference.

Specify exact dimensions

convx convert logo.svg --to png --width 1200 --height 630

Produces a 1200x630 PNG, perfect for Open Graph social sharing images. If the aspect ratio does not match the SVG's native proportions, ConvX centers the graphic and fills the remaining space with the background color (transparent by default).

Set DPI for print

convx convert logo.svg --to png --dpi 300

Renders at 300 DPI using the SVG's viewBox to determine pixel dimensions. A 4-inch-wide logo at 300 DPI produces a 1200-pixel-wide PNG. This is the standard for professional print output.

Set a background color

convx convert icon.svg --to png --width 512 --bg white

Adds a white background behind the SVG content. Useful when the PNG will be displayed on a platform that does not support transparency (some email clients render transparent areas as black).

Batch rasterize an icon set

convx convert icons/ --to png --width 1024 -j 4

Converts every SVG file in the icons directory to 1024x1024 PNG, running 4 conversions in parallel. This is ideal for generating app icon sets, design system assets, or social media graphics from SVG source files.

convx convert icons/ --to png --width 1024 -j 4 -d ./png-output

Outputs to a separate directory. ConvX preserves filenames with the new extension.

Generating multiple sizes from one SVG

App icon pipelines often need the same icon at many sizes: 16, 32, 48, 64, 128, 256, 512, and 1024 pixels. You can script this with ConvX in a simple loop:

for size in 16 32 48 64 128 256 512 1024; do
  convx convert icon.svg --to png --width $size -d ./icons/${size}x${size}
done

Each iteration produces a PNG at the specified size. The output directory structure matches what Xcode and Android Studio expect for app icon assets.

Transparent backgrounds

SVGs are transparent by default (unless the SVG itself defines a background rectangle). When converting to PNG, transparency is preserved. The PNG output uses an alpha channel, so the background is see-through.

Potential issues with transparency:

• White-on-transparent: If your SVG has white elements with no background, the PNG will have white shapes on a transparent background. On a white webpage, the image appears invisible. Add a background color during conversion or adjust the SVG source.
• Semi-transparent effects: SVG supports opacity, gradients with transparency, and blend modes. These all rasterize correctly to PNG alpha channels. Complex blend modes may render slightly differently depending on the SVG renderer used.
• Email clients and transparency: Outlook and some older email clients render transparent PNG areas as white (Outlook) or black (older Lotus Notes). If your PNG will be used in email, provide a solid background.

Font handling in SVG-to-PNG conversion

SVGs can reference external fonts. If those fonts are not available on the machine doing the conversion, text will fall back to a default system font, which may change the layout. There are three ways to handle this.

• Convert text to paths: In your vector editor (Illustrator, Figma, Inkscape), convert all text to outlines/paths before exporting SVG. This embeds the letterforms as shapes, removing the font dependency entirely. The SVG file is slightly larger but renders identically everywhere.
• Embed fonts in the SVG: Include the font data as a Base64-encoded @font-face rule within the SVG's <style> block. This increases file size but guarantees correct rendering.
• Install the fonts: Make sure the required fonts are installed on the machine running ConvX. ConvX uses the system's font library during rasterization.

For detailed documentation on SVG text rendering and font handling, see the Inkscape documentation, which covers text-to-path conversion and font embedding workflows.

Common SVG-to-PNG workflows

Favicon generation

Modern favicon setup requires multiple files. Start with a single SVG and generate everything:

convx convert favicon.svg --to png --width 32 -d ./public
convx convert favicon.svg --to png --width 180 -d ./public

The 32x32 PNG is for the standard favicon. The 180x180 PNG is for Apple touch icons. Keep the original SVG in your public directory too, referenced with <link rel="icon" type="image/svg+xml"> for browsers that support it.

Social media assets

Open Graph images should be 1200x630. Twitter cards work best at 1200x600. LinkedIn recommends 1200x627. Generate all three from one SVG:

convx convert og-image.svg --to png --width 1200 --height 630
convx convert og-image.svg --to png --width 1200 --height 600
convx convert og-image.svg --to png --width 1200 --height 627

Design system export

If your design system uses SVG source files for icons and components, generate raster assets for platforms that need them:

convx convert ./design-system/icons/ --to png --width 64 -j 8 -d ./assets/icons/1x
convx convert ./design-system/icons/ --to png --width 128 -j 8 -d ./assets/icons/2x

This produces 1x and 2x icon sets for standard and Retina displays.

Using the desktop app

Drag your SVG file into ConvX. The app renders a preview of the SVG and shows the detected viewBox dimensions. Select PNG as the output format. Enter the desired width (height adjusts automatically to maintain aspect ratio). Optionally set DPI and background color. Click convert. For batch operations, drag a folder of SVGs and set the output dimensions once; ConvX applies the same settings to all files.

Using ConvX with AI agents via MCP

ConvX includes an MCP server that allows AI agents to convert files programmatically. An AI design assistant could generate SVG code, then call ConvX to rasterize it at multiple sizes for different platforms. The MCP integration handles the local file conversion without needing to shell out to external tools.

Troubleshooting

Text renders in the wrong font

The SVG references a font that is not installed on your machine. Three options: install the font, embed the font in the SVG, or convert text to paths in your vector editor before exporting. Converting to paths is the most reliable approach because it eliminates the font dependency entirely.

Output PNG is blurry

The output dimensions are too small for the intended use. SVG-to-PNG conversion rasterizes at the exact pixel dimensions you specify. If you convert at 64x64 and display at 256x256, the image will be blurry. Always convert at the final display size or larger. For Retina/HiDPI displays, convert at 2x the CSS pixel dimensions.

Colors look different in the PNG

SVG and PNG can use different color spaces. SVGs typically use sRGB. If the SVG uses a color profile or references colors in a non-sRGB space, the rasterized PNG may look slightly different. Make sure your SVG uses standard sRGB hex colors (#FF0000, not device-specific CMYK or P3 values).

Complex SVG features are missing

Advanced SVG features like <filter> effects (blur, drop shadow), <clipPath>, CSS mix-blend-mode, and JavaScript-driven animations may not render correctly in all SVG-to-PNG converters. ConvX supports standard SVG 1.1 features including filters, clip paths, masks, gradients, and patterns. JavaScript-driven content and SMIL animations are not executed during rasterization; the static state of the SVG is rendered.

SVG viewBox is wrong and output is cropped

If the SVG has an incorrect or missing viewBox attribute, the output PNG may be cropped or have unexpected proportions. Open the SVG in a text editor and check the viewBox attribute on the root <svg> element. It should be viewBox="0 0 width height" matching the actual content bounds. If the viewBox is missing, the SVG may use width and height attributes in absolute units, which ConvX uses as the default canvas size.

Transparent areas appear black

Some image viewers and applications render transparent PNG backgrounds as black. The PNG file is correct; the viewer is just displaying transparency as black instead of a checkerboard pattern. To verify, open the PNG in a tool that shows transparency (Photoshop, GIMP, Preview on Mac). If you need a solid background for a specific use case, add --bg white during conversion.

Related articles

• How to Optimize Images for the Web Without Losing Quality
• WebP vs AVIF vs JPEG: Which Image Format in 2026?
• How to Batch Convert Files from the Command Line