SVG IMAGES TO PNG

How do you keep linked images visible when converting SVG to PNG?

Embed each required bitmap inside the SVG as a data URL before converting. A relative file path, local drive path, or remote image URL may be unavailable when the SVG is opened as a standalone browser image. Also give every <image> an explicit width and height, then check its crop with preserveAspectRatio. If the bitmap is visible in the SVG preview, it is much more likely to be present in the downloaded PNG.

Preview and convert your SVG

FAST DIAGNOSIS

Start with the value inside image href

href pattern	What it depends on	Portable fix
`photo.png` or `../img/photo.jpg`	A separate file at a path resolved relative to the SVG document.	Embed the bitmap as a data URL, or keep the exact folder structure when the SVG is used outside this converter.
`C:\...\photo.png` or `file:///...`	A file on one computer and browser permission to read it.	Do not distribute a machine-specific path. Embed the image data.
`https://example.com/photo.png`	The network, the remote server, its access policy, and whether the resource is still available.	Use an embedded copy when the license permits it and you need a self-contained SVG.
`data:image/png;base64,...`	The bitmap bytes are stored inside the SVG itself.	Keep it embedded; confirm the media type and data are complete.
Blank or missing `href`	No bitmap source is supplied.	Restore the correct source from the original design file.

Use the preview as a dependency test. If a photo is already absent before conversion, changing PNG scale or background will not fetch or reconstruct it.

SELF-CONTAINED SVG

Replace the external path with a data URL

An SVG <image> element can reference a bitmap through its href attribute. A data URL places the encoded bitmap in that attribute, so the SVG no longer needs to retrieve a separate image file during rendering.

<image
  x="40" y="30" width="320" height="180"
  href="data:image/png;base64,iVBORw0KGgoAAA..."
  preserveAspectRatio="xMidYMid slice" />

PNG bitmap

Use a media type beginning with data:image/png;base64,, followed by the complete PNG data.

JPEG bitmap

Use data:image/jpeg;base64,. JPEG does not preserve transparent pixels.

WebP bitmap

Use data:image/webp;base64, only when the target browsers and downstream tools support the embedded format.

Licensing check

Embedding copies the image into the SVG. Confirm that you have permission to redistribute that image.

Embedding increases the SVG file size because the bitmap data becomes part of the document. It improves portability, but it does not turn the bitmap into vector artwork or add detail beyond the source image.

PLACEMENT AND CROP

Give the image a real box before exporting

The x and y attributes position the image. The width and height attributes define its viewport. Missing, zero, or unintended dimensions can make a valid embedded bitmap invisible.

preserveAspectRatio	Result inside the image box	Use when
`xMidYMid meet`	Fits the whole bitmap while preserving its aspect ratio; empty space can remain.	No part of the source image may be cropped.
`xMidYMid slice`	Fills the entire box while preserving aspect ratio; edges can be cropped.	A photo must cover a frame completely.
`none`	Stretches the bitmap to the exact width and height.	Distortion is intentional or the source and target ratios already match.

If the bitmap appears in the wrong place, inspect transforms on the image and its parent groups. If it is partly hidden, inspect the root viewBox, clip paths, masks, and nested SVG viewports before blaming the converter.

CROSS-ORIGIN FAILURE

Why a remote photo can block PNG download

Canvas export is subject to browser security rules. Drawing image data obtained from another origin without suitable cross-origin permission can make the canvas non-origin-clean, and attempts to read or export it can fail with a security error. A remote image may also fail earlier because the SVG is loaded as an image and its subresource is unavailable.

Do not work around this by uploading private artwork to an unknown service. For this browser-only converter, make a licensed, self-contained SVG on your own device and verify the complete preview before converting.

Changing http to https is not a complete fix. The host must still serve the file, allow the needed cross-origin use, and remain reachable. Embedding removes that network dependency.

REPEATABLE WORKFLOW

Prepare an SVG with photos for reliable PNG export

Open the SVG as plain text and find every <image> element.
List each href and identify whether it is relative, local, remote, or embedded.
Replace required external images with data URLs when you have redistribution rights.
Set explicit x, y, width, and height.
Choose meet, slice, or none deliberately.
Load the SVG in the converter and confirm every bitmap in the preview.
Convert at the final dimensions and inspect the PNG at 100% display size.

Keep the original asset package. An embedded SVG is useful for delivery, but the editable source and original bitmap files are easier to update later.

FAQ

SVG image to PNG questions

Why does the SVG show vectors but not its photo?

The vector shapes are stored inside the SVG, while the photo may be only a reference to another file. Inspect the image href and embed the required bitmap.

Does base64 embedding improve photo quality?

No. It packages the same bitmap bytes inside the SVG. PNG quality still depends on the source bitmap and the final export size.

Why is my embedded image stretched?

The image box and source bitmap have different aspect ratios, and preserveAspectRatio may be set to none or omitted in a workflow that changes it. Choose an explicit fit or crop behavior.

Can I use a local file path in an SVG?

It may work only in a limited local setup. It is not portable to another device or a public website, so embed the image for a self-contained file.

Make the SVG self-contained, confirm the preview, then export.

Open the SVG to PNG converter

Published October 1, 2026.