PNG to SVG Crop Converter
Load a PNG, drag the crop handles to define exactly the area you need, preview the result, then download an SVG container file with the cropped raster image embedded inside. Everything runs in your browser — your image never leaves your device.
Drop a PNG here
or Browse Files · PNG supported
What This Tool Does
This tool loads a PNG image directly in your browser using URL.createObjectURL and img.decode() for reliable, guaranteed non-blank rendering. It presents an interactive crop overlay with draggable handles. When you download, the selected crop area is rendered to an off-screen canvas, exported as a base64 PNG data URI, and wrapped in a valid SVG file using an <image> element. The output is an SVG container with the cropped raster PNG embedded inside — not a traced or vectorized SVG. The SVG canvas dimensions and viewBox match the crop pixel dimensions exactly. No server upload is required. The full workflow runs entirely in client-side JavaScript using the HTML5 Canvas API.
Who This Is For
- Developers who need a cropped image delivered as an
.svgfile for use in SVG-aware design pipelines, icon systems, or build tools that accept SVG inputs - Designers who want to extract a specific region from a PNG and place it as an SVG asset in Figma, Illustrator, or other design tools that work with SVG containers
- Anyone who needs a cropped PNG region in an SVG wrapper for embedding in HTML via
<img src="file.svg">or<object>without any software installation - Web authors who want to crop a PNG and deliver it as an SVG file for systems that require SVG file format regardless of vector content
PNG vs SVG: Format Comparison
| Property | PNG | SVG |
|---|---|---|
| Content type | Raster (pixel grid) | Vector markup (or raster embedded in SVG container) |
| Scalability | Fixed resolution — degrades when scaled up | Scales without quality loss (when vector; raster-in-SVG scales like PNG) |
| Transparency support | Full alpha channel (0–255) | Full alpha (via embedded PNG or SVG opacity) |
| File format | Binary compressed | XML text (or XML wrapping binary data URI) |
| Browser support | Universal | Universal (all modern browsers) |
| This tool's output | Source format | SVG container with cropped PNG embedded as base64 data URI |
| Best for | Lossless raster images, screenshots | Icon systems, design tools, SVG-required workflows |
Frequently Asked Questions
<image> element using a base64 data URI. The raster pixel content is preserved exactly as-is — no vectorization, tracing, or path generation occurs. The result is a valid .svg file, but the visual content remains raster-based.<image> element. Transparent and semi-transparent pixels from the source PNG are preserved in the embedded data — the SVG renders them correctly as transparent when displayed in any browser or SVG viewer.xmlns="http://www.w3.org/2000/svg", width and height set to the crop pixel dimensions, and a matching viewBox. Inside is a single <image> element with href set to the base64-encoded PNG data URI, sized to fill the full SVG canvas. This is a valid, standards-compliant SVG file.