svg to png
100% Browser-Side · InstantSVG Input
Drop your SVG file here
or click to browse — .svg files only
SVG Preview
Natural size:
No explicit dimensions detected (using viewBox)
Output Size
Output: · Ratio locked
Background
PNG will have a transparent (alpha) background
Output Filename
.png
How It Works
- 1 Provide your SVG by uploading a file or pasting the code directly — no server involved.
- 2 Configure output dimensions, background color, and filename.
- 3 Convert — the SVG is drawn onto an HTML5 Canvas at your specified resolution and exported as PNG.
- 4 Download your lossless PNG with a single click.
SVG vs PNG
SVG is vector-based (infinitely scalable), while PNG is raster (fixed pixels). Use PNG when you need a specific pixel size for web, social media, or print.
✓PNG works in all apps (Office, Photoshop, etc.)
✓Supports transparent background
✓Lossless — no quality degradation
!Use 2× or higher for retina/sharp prints
Common Use Cases
🖼
Export logos/icons from Figma or Illustrator as PNG for use in documents or email
📱
Convert SVG illustrations to exact pixel sizes required by app stores or social media
📋
Embed SVG graphics into Word, PowerPoint, or PDF documents as high-res PNGs
🖨
Prepare SVG for print by rasterizing at 300+ PPI (e.g. 2480×3508 for A4 at 300 DPI)
Important Notes
⚠ SVGs with external fonts may render with a fallback font unless the font is installed locally.
⚠ SVGs with linked external images may not render due to browser CORS restrictions.
✅ SVGs with inline styles, gradients, filters, and masks are fully supported.
✅ Max canvas size is typically 16,384×16,384 px in modern browsers.
Rendering vector markup into a bitmap
An SVG describes shapes as mathematical instructions, so it has no fixed pixel grid. A PNG is a grid of pixels. Conversion means deciding on a grid and asking the browser to draw the vector onto it.
The tool loads your SVG, reads its natural dimensions from its own width, height or viewBox, and uses those as the starting size. It then creates a canvas at your chosen output dimensions, draws the SVG into that canvas at the target scale, and exports the canvas as a PNG. Because the shapes are redrawn at the output size rather than being enlarged from a smaller bitmap, edges stay clean at whatever size you pick.
Scale buttons multiply the natural size, so a 1x export matches the SVG's own dimensions and 4x renders four times larger in each direction. Typing an exact width instead recalculates the height from the aspect ratio while the ratio lock is on, so nothing is squashed.
Background handling is a canvas decision. Transparent leaves the canvas empty, so the PNG keeps an alpha channel wherever the artwork does not paint. Choosing white, black or a custom colour fills the canvas first, giving a fully opaque image.
The tool loads your SVG, reads its natural dimensions from its own width, height or viewBox, and uses those as the starting size. It then creates a canvas at your chosen output dimensions, draws the SVG into that canvas at the target scale, and exports the canvas as a PNG. Because the shapes are redrawn at the output size rather than being enlarged from a smaller bitmap, edges stay clean at whatever size you pick.
Scale buttons multiply the natural size, so a 1x export matches the SVG's own dimensions and 4x renders four times larger in each direction. Typing an exact width instead recalculates the height from the aspect ratio while the ratio lock is on, so nothing is squashed.
Background handling is a canvas decision. Transparent leaves the canvas empty, so the PNG keeps an alpha channel wherever the artwork does not paint. Choosing white, black or a custom colour fills the canvas first, giving a fully opaque image.
Worked example: an icon exported at several sizes
Take a logo whose SVG declares a natural size of 120 by 80 pixels, an aspect ratio of 1.5.
Selecting the 1x scale exports a 120 by 80 PNG. The 2x scale gives 240 by 160, 3x gives 360 by 240, and 4x gives 480 by 320. Each is rendered fresh from the vector, so the 4x version is genuinely sharper than the 1x version enlarged in an image editor would be.
Suppose a marketplace requires an image exactly 600 pixels wide. Type 600 into the width field with the ratio lock on and the height is calculated as 600 divided by 1.5, which is 400 pixels. The export is then 600 by 400.
For a display rendering at two device pixels per CSS pixel, a logo shown at 300 CSS pixels wide needs a 600 pixel file, which is the same export.
Leave the background transparent and the PNG carries an alpha channel, so the logo sits correctly on any colour. Choose white instead and the same file gains an opaque white rectangle behind it, which is what you want for a document or an email client that handles transparency badly.
Selecting the 1x scale exports a 120 by 80 PNG. The 2x scale gives 240 by 160, 3x gives 360 by 240, and 4x gives 480 by 320. Each is rendered fresh from the vector, so the 4x version is genuinely sharper than the 1x version enlarged in an image editor would be.
Suppose a marketplace requires an image exactly 600 pixels wide. Type 600 into the width field with the ratio lock on and the height is calculated as 600 divided by 1.5, which is 400 pixels. The export is then 600 by 400.
For a display rendering at two device pixels per CSS pixel, a logo shown at 300 CSS pixels wide needs a 600 pixel file, which is the same export.
Leave the background transparent and the PNG carries an alpha channel, so the logo sits correctly on any colour. Choose white instead and the same file gains an opaque white rectangle behind it, which is what you want for a document or an email client that handles transparency badly.
Choosing an export size and knowing what you give up
Export at the largest size you will actually display, and ideally at twice that for high density screens, because a PNG cannot be enlarged afterwards without going soft. If a header logo appears at 200 pixels wide on a standard display, export at 400 so it stays crisp on a retina screen. Going much beyond that only inflates the file.
Canvas size is bounded. Browsers typically cap a canvas at around 16,384 pixels on a side, and very large exports consume a lot of memory, so an enormous scale on an already large graphic may fail or produce an empty result.
Two limitations are worth understanding. Converting to PNG discards the vector: the output is fixed at its exported resolution and can no longer be recoloured by editing markup or scaled freely, so keep the SVG as your master file. And an SVG that references external resources, such as a font installed on the designer's machine or an image loaded from another site, may render differently or incompletely, because only what the browser can resolve at render time appears in the bitmap. Converting text to outlines before export avoids the font problem.
Canvas size is bounded. Browsers typically cap a canvas at around 16,384 pixels on a side, and very large exports consume a lot of memory, so an enormous scale on an already large graphic may fail or produce an empty result.
Two limitations are worth understanding. Converting to PNG discards the vector: the output is fixed at its exported resolution and can no longer be recoloured by editing markup or scaled freely, so keep the SVG as your master file. And an SVG that references external resources, such as a font installed on the designer's machine or an image loaded from another site, may render differently or incompletely, because only what the browser can resolve at render time appears in the bitmap. Converting text to outlines before export avoids the font problem.
Frequently Asked Questions
Yes. There is a tab for pasting markup directly, which saves saving a file first when you have copied a vector from a design tool, an icon library or a code editor. The pasted markup is rendered the same way an uploaded file would be, using its own width, height or viewBox for the natural size.
At least the size it will be displayed, and preferably double that for high density screens. A logo shown at 250 pixels wide should be exported at 500 so it stays sharp on a retina display. PNGs cannot be enlarged later without losing sharpness, so it is better to export slightly larger than you need.
Yes if you leave the background set to transparent, which preserves the alpha channel so the image sits on any colour. Choosing white, black or a custom colour fills the canvas first and produces a fully opaque PNG, which is the safer option for email clients and documents that handle transparency inconsistently.
Most often because the SVG depends on something the browser cannot resolve at render time, typically a font that is not installed or an image referenced from another location. Converting text to outlines in your design tool before exporting the SVG removes the font dependency and makes the rendering predictable.
Not meaningfully. Converting to PNG throws away the shape instructions and leaves only pixels, and automatic tracing produces an approximation with far more complex paths than the original. Always keep the SVG as your master file and treat each PNG as a disposable export at one particular size.