Illustration of a photo card sitting inside a dashed SVG container outline with a "not vector" label

Image guides

Raster Image Inside SVG, Explained

Wrapping a raster PNG or JPG inside an SVG container is not the same as vectorizing it. This guide explains what actually happens, when it is useful, and what its limits are.

Ready to try the tool this guide describes?

What actually happens

The source image is re-encoded as PNG, converted to base64 text, and embedded inside an <image> element in a valid SVG document sized to match the original pixel dimensions. No tracing, edge-detection, or vector path generation happens — the pixels themselves are unchanged.

Why this is useful anyway

Some web embedding, CMS, or document workflows specifically require a .svg file, even for a photo or screenshot, so it can be dropped alongside genuine vector assets or styled with SVG-aware tooling.

What it does not do

Enlarging the resulting SVG does not add new detail or sharpen edges — the embedded raster content scales exactly like a plain image would. If you need a real vector trace, use dedicated vectorization software instead.

Raster Image Inside SVG FAQ

Does this vectorize my image?
No. It embeds the raster pixels inside an SVG container as a base64 image — the picture itself is unchanged.
Why is the SVG file larger than the source image?
Base64 text encoding adds roughly 33% overhead compared to the raw image bytes, plus a small amount of SVG markup.
Does transparency survive the wrap?
Yes, when the source has an alpha channel — the embedded PNG data keeps it.
When should I use a real vectorizer instead?
When you need scalable line art or logos that stay crisp at any size — that requires actual path-tracing software, not raster embedding.
Where can I try this?
Use PNG to SVG or JPG to SVG, both processed locally in your browser.

Related guides

Open the tool

Jump into PNG to SVG when you are ready to process your files.

← Back to all guides