A PNG to SVG converter wraps your raster image in a scalable vector container, making it work everywhere SVG is accepted: HTML pages, design tools, WordPress content, print workflows, and anywhere you need a format that scales without pixelating. This tool runs in your browser, takes a single PNG, and produces a properly structured SVG with your image embedded inside it. No upload, no account, no waiting.
Drop or Browse Your File
Click the upload area or drag your PNG directly onto it. A thumbnail of the image appears straight away alongside the filename, file size, and original pixel dimensions. Only PNG files are accepted. Anything else gets ignored.
To swap the file after loading, click the drop zone again.
Setting Dimensions
The width and height fields default to the pixel dimensions of your original PNG. Aspect ratio lock is on by default. Change one field and the other adjusts automatically.
You can set dimensions that differ from your original. A 200x100px PNG inside an SVG that declares itself as 400x200px is valid and useful when you want the SVG to carry specific intrinsic dimensions for your layout without creating a resized copy of the image file. Untick the lock to set an arbitrary width and height independently.
This matters in practice: setting explicit width and height attributes on an SVG prevents layout shifts when the file loads on a page, which affects your Cumulative Layout Shift (CLS) score in Google’s Core Web Vitals.
Accessibility Fields
Title and Description are optional. If the image communicates something, fill them in.
Title generates a <title> element inside the SVG. Screen readers announce it when the image is focused. Description generates a <desc> element. Both also produce aria-label and role="img" on the SVG root element. For a decorative image that adds no information to the page, leave both blank.
Filling in the title field also benefits SEO. SVG text content is indexed by search engines. A descriptive title inside the SVG gives Google additional context about the image, separate from your HTML alt attribute.
Generating and Downloading
Click Generate SVG. Three things appear: a preview on a checkerboard background, a stats table, and a truncated code block showing the SVG markup.
The checkerboard matters. It shows where your image is transparent. If you see the pattern through parts of your image, the alpha channel is intact and carries through to the SVG output.
The stats table shows original size, SVG size, and the difference. SVG files are almost always larger than the source PNG because they add XML wrapper code and base64-encode the image data inside the file. Expect the SVG to be roughly 30 to 40% larger. This is the trade-off for a format that works in vector contexts.
Download SVG saves the file. Copy SVG Code puts the full markup on your clipboard so you can paste it directly into a page template or code editor.
What This Tool Actually Produces
The output is a PNG-embedded SVG. Your image lives as base64-encoded data inside an SVG <image> element. The file is valid SVG, it scales, it accepts CSS styling, and it works anywhere SVG is accepted.
This is not the same as vector tracing. Tracing converts pixel edges into mathematical paths and Bezier curves, producing a true vector file where shapes are described as geometry rather than a grid of pixels. The result is editable in Illustrator or Inkscape, scalable at any size with zero pixel data, and often much smaller for simple graphics like logos and icons.
Tracing requires a compiled algorithm. It cannot run inside a standard browser without WebAssembly. If you need traced SVG output, Inkscape (free, desktop) does this well. For a simple logo with flat colours, it works cleanly. For a photograph, it produces a stylised approximation rather than a faithful reproduction.
The info banner at the top of the tool is direct about this distinction. Embedded SVG is the right choice for photos, detailed illustrations, or any image where pixel-accurate reproduction matters. Traced SVG is the right choice for logos, icons, and flat-colour artwork.
Embedded SVG vs Traced SVG: Key Differences
This is the question most people land on when they search for a PNG to SVG converter. The two outputs look similar in a file browser but behave very differently.
| Property | Embedded SVG (this tool) | Traced SVG (Inkscape, Illustrator) |
|---|---|---|
| Image type | Raster pixels inside an SVG wrapper | Mathematical paths and shapes |
| Editable in Illustrator/Inkscape | No (image is opaque pixel data) | Yes (paths are fully editable) |
| File size | Larger than source PNG (30–40%) | Often much smaller for simple graphics |
| Photo accuracy | Pixel-perfect | Stylised approximation |
| Transparency | Preserved from PNG alpha channel | Depends on tracing settings |
| Best for | Photos, screenshots, detailed images | Logos, icons, flat-colour artwork |
| Browser-based | Yes | No (requires desktop software) |
If you need to place a photograph or complex image into an SVG-aware context, embedded SVG is correct. If you need an editable vector of a logo or icon, trace it in Inkscape using the Path menu, then Trace Bitmap.
When to Use This Converter
PNG-embedded SVG is useful when you need to place an image inside a vector-aware context. Figma accepts it. SVG-based email templates accept it. WordPress blocks that allow SVG files accept it. The embedded approach preserves full colour depth and transparency without colour quantisation or tracing artefacts.
It is also useful when you need to declare specific intrinsic dimensions on an image without resizing the file. The SVG wrapper carries those dimensions independently of the pixel content inside.
Photographs, screenshots, product images, and anything with fine detail belong here. Logos you want to edit as vectors belong in Inkscape.
Common situations where this converter is the right tool:
- Placing a photograph inside a Figma component that requires SVG input
- Adding a product image to an SVG-based email template
- Uploading a PNG to a WordPress block that only accepts SVG
- Assigning specific layout dimensions to an image without creating a resized file
- Adding accessibility metadata (
<title>and<desc>) to an image in a format that carries them natively
How to Use the SVG Output in HTML
Once you download the SVG, you have three ways to put it on a web page. Each behaves differently.
As an <img> tag: The simplest approach. Works like any other image. You cannot manipulate it with JavaScript or override its internal CSS from the page stylesheet.
<img src="your-image.svg" alt="Description of image" width="400" height="300">Inline in the HTML: Paste the full SVG markup directly into your HTML. The image becomes part of the DOM. You can style it with CSS and target its elements with JavaScript. Inline SVG also removes the extra HTTP request for the file, which helps on pages with many small images. The downside is that the file is not cached separately by the browser.
<!-- Paste the full SVG markup here -->
<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>In WordPress: WordPress blocks SVG uploads by default for security reasons. The most common workaround is the Safe SVG plugin, which sanitises SVG files on upload and allows them in the media library. Alternatively, paste the SVG code directly into an HTML block in the editor. Once in place, the image scales cleanly at any size without pixelating.
Frequently Asked Questions
What is the difference between a PNG-embedded SVG and a traced SVG?
An embedded SVG wraps your raster image in an SVG container. The pixels stay as pixels. A traced SVG runs the image through a path-tracing algorithm that converts edges into mathematical shapes. Traced SVGs are true vectors, smaller for simple graphics, and editable in design software. This tool produces embedded SVGs. For tracing, use Inkscape or Adobe Illustrator.
Will my transparent background be preserved?
Yes. The SVG <image> element carries the alpha channel from your PNG through to the output. Transparent areas stay transparent. The checkerboard in the preview shows you exactly which parts of the image are transparent before you download.
Why is the SVG file larger than my original PNG?
SVG adds XML wrapper code around your image, and base64-encoding the PNG data inside the file adds roughly 33% to the raw image size. The total SVG ends up larger. You are trading file size for a format that works in vector contexts. For most use cases the size difference is small enough not to matter.
Are my files uploaded to a server?
No. The conversion runs in your browser using the FileReader API. Your image goes from your device into browser memory, gets processed, and comes back to your device when you download. Nothing is sent over the internet.
Does converting PNG to SVG make the image a true vector?
No. The output is a PNG-embedded SVG. The image stays as pixels inside an SVG wrapper. It scales without the file pixelating at the container level, but the pixel data inside does not change. A true vector requires tracing the image into mathematical paths, which requires desktop software like Inkscape.
Can I use the SVG in WordPress?
WordPress blocks SVG uploads by default for security reasons. The most common workaround is the Safe SVG plugin, which sanitises SVG files on upload and allows them in the media library. Alternatively, paste the SVG code directly into an HTML block in the editor. Once in place, the image scales cleanly at any size without pixelating.
Can I edit the SVG output in Adobe Illustrator or Inkscape?
You can open it, but the image inside is pixel data, not editable paths. Illustrator and Inkscape display it correctly, but you cannot select and modify individual shapes because there are none. The image is embedded as a raster block. To get editable vector paths, you need to trace the original PNG using Illustrator’s Image Trace or Inkscape’s Trace Bitmap tool.
