Why does an SVG look different after converting to PNG?
The PNG usually differs because the SVG depends on something that is not fully contained in the file: an unavailable font, a linked image, inherited page CSS, a filter that extends beyond the SVG canvas, or missing dimensions. Make the SVG self-contained, define its size and viewBox, then check the browser preview before downloading.
Preview and convert your SVGMatch the symptom to the likely cause
| What changed? | Likely cause | What to inspect | Practical fix |
|---|---|---|---|
| Text wraps or shifts | The intended font is unavailable. | font-family, web-font URLs, and text width | Convert critical text to paths or embed a permitted font. |
| An image is blank | The SVG links to an external or local image. | href or xlink:href on <image> | Embed the image as a data URL or package it inside the SVG. |
| Shadow or blur is cut off | The filter extends outside the SVG or filter region. | filter, filterUnits, and the viewBox edges | Increase the filter region or add space around the artwork. |
| Colors or spacing change | The SVG depended on CSS from its original page. | Classes, CSS variables, and inherited styles | Move required styles into the SVG itself. |
| Output has an unexpected size | Width, height, or viewBox is missing or inconsistent. | The root <svg> attributes | Set a valid viewBox and choose explicit export dimensions. |
Start with the preview: if the converter preview is already wrong, downloading the PNG will preserve that wrong rendering. Fix the SVG source before changing the PNG scale.
Fix missing or substituted fonts
SVG text remains text until it is rasterized. If the named font is not installed and the SVG cannot load it, the browser chooses a fallback. Different glyph widths can change line breaks, alignment, and the position of nearby elements.
Best for logos
Convert the final lettering to vector paths in the design application. The shape no longer depends on a font being present, but the text is no longer editable as text.
Best for editable diagrams
Keep text live, use a dependable font stack, and test on the device that performs the conversion.
When embedding a font
Include the font data only when the font license permits embedding. Put the required @font-face rule inside the SVG rather than relying on page CSS.
What not to do
Do not increase the PNG resolution to fix a substituted font. More pixels make the fallback font sharper; they do not restore the missing typeface.
Fix blank external images
An SVG can contain an <image> element whose href points to another file. That reference may work on the original computer yet fail in a browser converter because the path is local, the remote server blocks access, the URL has expired, or the conversion happens offline.
- Open the SVG as text and search for
<image. - Check whether its
hrefbegins withdata:,http,file:, or a relative path such asimages/photo.png. - For a portable file, embed the image data in the SVG instead of linking to a separate file.
- Reload the SVG and confirm that the preview shows the image before converting.
Privacy note: this converter processes the SVG in the current browser tab. However, an SVG that contains a remote URL may cause the browser to request that remote asset. Use a self-contained SVG when you want the artwork to work without external requests.
Fix clipped shadows, blur, and filters
Blur and drop shadows often extend beyond the geometry they decorate. If that effect reaches past the SVG viewBox or the declared filter region, the browser can clip it at the edge.
- Check the canvas: add space around the artwork by expanding the viewBox without stretching the artwork.
- Check the filter region: make sure the filter's
x,y,width, andheightinclude the full effect. - Check the preview at the target size: thin strokes and subtle blur can look different after rasterization because the PNG is a fixed pixel grid.
- Simplify only as a test: temporarily remove the filter. If the rest renders correctly, the filter is the area to isolate.
Make size, colors, and styles self-contained
A standalone SVG should not need the surrounding web page to define its appearance. Classes can remain, but their rules must be included inside the SVG. Replace inherited CSS variables with actual values when the file must render independently.
<svg viewBox="0 0 800 600" width="800" height="600">
The viewBox defines the internal coordinate system. Width and height provide a default rendered size; the converter can still export proportionally at another size.
If the SVG has a valid viewBox but no fixed width or height, choose the desired output width in the converter and keep the aspect ratio locked. If it has neither usable dimensions nor a viewBox, return to the source application and define a canvas before converting.
SVG to PNG rendering questions
Why is the transparent background black in another app?
The PNG may still be transparent; some viewers display transparent pixels against black. Check it over a checkerboard or choose a white background before exporting.
Can a larger PNG fix a missing image or font?
No. Export scale controls pixel dimensions. Missing dependencies must be repaired in the SVG source.
Why does the SVG work on one website but not by itself?
The website may supply CSS, fonts, variables, or linked assets that are absent when the SVG is opened as a standalone file.
Should I keep the original SVG after downloading a PNG?
Yes. Keep the SVG as the editable vector master and generate new PNG sizes from it when needed.
Check the preview, choose the final size, and download the PNG.
Open the SVG to PNG converterPublished September 26, 2026.