Convert SVG to PNG
SVG is a vector format that scales infinitely, but many tools (PowerPoint, email clients, marketplaces, app stores) need a rasterized PNG. This converter renders your SVG to PNG at its native size with full transparency.
To convert SVG to PNG, drop the SVG above; the tool loads it into an off-screen Image, draws it onto a canvas at the SVG's intrinsic size, and exports a PNG with transparency preserved. Use this whenever a downstream tool — PowerPoint, an app store, a stock library, an old CMS — needs a rasterised copy of your vector artwork. Nothing is uploaded and the SVG's shapes, fills and gradients render exactly as your browser draws them. The conversion direction matters: vector to raster is one-way, and the PNG is fixed at whatever size it was rendered, so keep the SVG as your master. Two things commonly go wrong. An SVG without explicit width and height attributes has no intrinsic size and may rasterise small, so set them before converting. And fonts referenced by name rather than converted to paths will render with a substitute — or not at all — because the browser draws the SVG in isolation. Externally linked images inside the SVG are skipped.
Drop a SVG here, or click to upload
Output: PNG
What happens when you convert SVG to PNG?
SVG is an XML-based vector format standardised by the W3C. Vector shapes stay crisp at any zoom, but many platforms — social share cards, app stores, print pipelines, PowerPoint templates — require a raster PNG. The browser renders the SVG through its own SVG engine, so inline CSS, fills, standard web fonts, and simple filters render identically to how visitors would see the SVG on your site. The output is a full 8-bit alpha PNG at the SVG's declared width and height. If your SVG uses viewBox with no fixed size, the browser typically falls back to 300×150, so set explicit width and height attributes before conversion if you want a specific export size.
Common mistakes and limitations when going from SVG to PNG
External stylesheets, external fonts and external referenced images inside the SVG will not load — browsers block cross-origin fetches inside a data-URL-loaded SVG. Advanced SVG features (foreignObject with HTML, complex filter chains, some CSS animations) may render inconsistently between browsers. For pixel-perfect exports at a specific resolution, edit the SVG's width/height first. And because raster PNGs lose scalability, keep the original SVG as your master.
Choosing the right settings for SVG to PNG
SVG is vector and PNG is raster, so this conversion is a rasterisation — the single decision that matters is output resolution. An SVG has no inherent pixel size; it scales infinitely. The PNG you produce is fixed forever at whatever dimensions you rasterise to, and enlarging it later will look soft. The practical rule is to render at least twice the size the image will be displayed at, so it stays sharp on high-density screens. For a logo shown at 200 pixels wide, render at 400 or 600. Rendering larger costs only file size and is easy to downscale; rendering too small cannot be undone without going back to the SVG. Transparency is preserved, which is usually the point — an SVG logo rasterises to a PNG with a clean alpha channel ready to place on any background. The common failure is fonts. An SVG that references a font by name rather than embedding or outlining it will render with a substitute if that font is not available, silently changing the appearance. Before converting, convert text to paths in your design tool. The other thing to verify is that external references — linked images, external stylesheets — are inlined, since anything the SVG pulls from elsewhere will not be fetched during a local rasterisation. If the SVG has no explicit width and height attributes, only a viewBox, the rasteriser has to pick a size and different tools pick differently. Setting explicit dimensions in the SVG before converting removes that ambiguity and gives you a predictable output.
SVG to PNG conversion FAQ
What size will the PNG be?
- The PNG is rendered at the SVG's intrinsic width and height. Edit those attributes before conversion to control the output resolution.
Will the background be transparent?
- Yes. Transparent SVG canvas becomes transparent PNG pixels — only the drawn shapes are opaque.
Do external fonts render correctly?
- System and standard web fonts render. External Google Fonts referenced via a link tag inside the SVG may not load and will fall back to the browser's default.
Can I export at a specific pixel size?
- Yes — set the SVG's width and height attributes (or viewBox scale) before conversion.
Does the SVG's inline CSS work?
- Yes. Inline styles, fills and standard SVG attributes render exactly as in the browser.
Why is my exported PNG blurry?
- Because rendering happens at the SVG's declared size. To get a high-resolution export, temporarily double or quadruple the SVG's width and height before dropping it here.
Can I convert SVG to a large PNG for print?
- Yes. Set the SVG width/height to the print resolution (e.g. 4000×4000 for a 300 DPI 13×13 inch print) before conversion.
Does the PNG stay editable?
- No. PNGs are flat pixels — keep the SVG as your editable master and re-export whenever you need a new size.
SVG vs PNG at a glance
| Property | SVG source | PNG output |
|---|---|---|
| Nature | Vector (XML) | Raster (pixels) |
| Scales without loss | Yes | No |
| Transparency | Yes | Yes (preserved) |
| Typical size | 1–50 KB | 5–500 KB depending on size |
| Best used for | Master logos, icons | PowerPoint, app stores, email |
Last updated:
References: W3C SVG 2 specification, MDN documentation on rasterising SVG via HTMLImageElement, ISO/IEC 15948 (PNG).