The practical answer
Keep the dimensions and viewBox fixed, change only the image reference, then inspect the downloaded PNG rather than relying on a scaled preview.
Check whether the SVG contains pixels or only an address
A rectangle or path can be described entirely inside an SVG. An image element may instead point to photos/item.png. Sending the SVG alone does not send that folder, and a working address in the designer’s environment may have no useful meaning on another computer.
MDN describes restrictions on SVG used as an image: some browsers prevent external resources from loading in that context while permitting resources inlined as data URLs. Directly opening an SVG document is a different context from decoding it as an image and drawing it to Canvas. Success in one does not establish success in the other.
| Content | Dependency | First check |
|---|---|---|
| rect/path geometry | Description inside the SVG | Coordinates, fill and clipping |
| Relative image reference | Another file and a base location | Whether the original image was supplied |
| Embedded data URL | Complete encoded image inside the SVG | Media type, prefix and complete data |
Change one condition on a 200 by 100 canvas
The original teaching sample contains no real product information. It has a white 200 by 100 canvas, a blue 10 by 10 square near the top left, and a green picture expected in the middle. The first version deliberately refers to missing-product.png, which is not supplied. A visible blue square with an empty middle is a useful clue: the whole SVG has not necessarily failed.
The second version embeds a 16 by 16 green PNG. Its displayed area remains 80 by 60 at coordinates 40,20. Both canvas and geometry stay unchanged. This is a solid-color locating test, not a sharpness comparison or a test of product-color fidelity.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100"><rect width="200" height="100" fill="white"/><rect x="5" y="5" width="10" height="10" fill="blue"/><image href="missing-product.png" x="40" y="20" width="80" height="60"/></svg><svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100"><rect width="200" height="100" fill="white"/><rect x="5" y="5" width="10" height="10" fill="blue"/><image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAGUlEQVQokWMQW+xFEmIY1bB4NJTEhmvSAAB+RAMQ4n2ahQAAAABJRU5ErkJggg==" x="40" y="20" width="80" height="60"/></svg>Inspect the actual PNG after conversion
Paste each version into the SVG to PNG tool, convert and download separately. Both outputs should be 200 by 100 pixels with the blue marker near the top left. The embedded version should also contain the green area. Read dimensions from the downloaded file because a responsive preview may be smaller.
The controlled case checks resource presence: the external-reference version lacks the green picture, while the embedded version contains it. This does not establish compatibility for arbitrary fonts, filters or third-party SVGs. If the blue marker is missing too, first investigate decoding, the namespace and complete markup instead of assuming an image-link problem.
Check before handing over
- The output remains 200 by 100 pixels
- The blue marker has not shifted
- The green area is present in the embedded version
- The downloaded PNG opens independently
Recover, embed and export the real design
Find the referenced original in the source design, confirm its rights and version, then use the design application’s embed or packaging workflow. A temporary account URL or a local disk path is a fragile delivery dependency. Do not substitute a random online image merely to fill an empty area.
If you handle encoding yourself, distinguish a complete image data URL from bare Base64. Encoded characters without a media-type prefix are not the same address. Embedding also increases size and places the image content inside the SVG, so review what you are including before sharing it.
Check resolution and clipping after the image returns
Resource completeness is only one condition. An embedded low-resolution photograph still has limited detail, and an unsuitable viewBox may still clip it. Use the separate SVG pixel and viewBox checks to diagnose those problems.
Keep the editable source and original assets alongside a checked PNG delivery copy. Conversion cannot recover an external file you no longer possess. Do not treat this workflow as a reason to execute unknown SVG scripts; ask for a trustworthy static delivery version when the source is uncertain.
Further reading & sources
Put the guide into practice
Open the relevant tool, preview the result and check your exported file.
