PNG to SVG Crop: Complete Guide to Cropping & Wrapping in SVG
🚀 Ready to crop and convert? PNG to SVG Crop Converter — free, browser-based, no sign-up.
Open Tool →What Is SVG and Why Does It Matter?
SVG (Scalable Vector Graphics) is an XML-based file format for two-dimensional graphics. When SVG contains actual vector paths — shapes defined by mathematical coordinates — the image scales to any size without quality loss. This makes it the standard format for logos, icons, and illustrations in modern web and design workflows.
However, SVG is also a capable container format. The SVG specification supports embedding raster images inside an SVG document using the <image> element, allowing PNG, JPEG, or other raster data to be wrapped in SVG markup. This is exactly what the PNG to SVG Crop Converter does: it crops a PNG and places the cropped raster pixels inside a valid SVG container, producing a real .svg file that opens in any browser or SVG-aware tool.
Raster-in-SVG: What the Output Actually Contains
It is important to understand what "PNG to SVG" means in the context of this tool. The output is not vectorized. No tracing, path generation, color quantization, or edge detection is performed. The tool does not attempt to convert your PNG's pixels into SVG paths or shapes.
Instead, the output SVG file contains a single <image> element whose href attribute holds the cropped PNG encoded as a base64 data URI. The SVG canvas dimensions — width, height, and viewBox — exactly match the pixel dimensions of the selected crop area. The result is a valid, standards-compliant SVG file that renders the cropped PNG when opened in any browser or SVG viewer.
This approach is sometimes called a "raster-in-SVG container" or "embedded raster SVG." It is a legitimate and widely-used technique for delivering raster images through SVG-compatible pipelines.
What Is PNG and Why Use It as a Source?
PNG (Portable Network Graphics) is the standard format for web graphics, screenshots, UI assets, and lossless source artwork. It supports full alpha-channel transparency — every pixel can have an opacity value from 0 (fully transparent) to 255 (fully opaque) — and uses lossless DEFLATE compression that preserves every pixel without quality loss. These properties make PNG the dominant source format for design assets that will be cropped, resized, or exported to other formats.
Because PNG is so widely used for source assets, there are frequent situations where a specific cropped region of a PNG needs to be delivered as an SVG file — for icon systems, design tools, or build pipelines that require SVG format. The PNG to SVG Crop Converter handles this in one browser-based step.
When Should You Crop and Wrap a PNG in SVG?
- Your design tool or icon pipeline requires SVG input. Many icon systems, design frameworks, and build tools accept only
.svgfiles. Wrapping a cropped PNG in an SVG container allows you to deliver raster image content through an SVG-required pipeline without installing additional software. - You need a specific region from a large PNG as a standalone SVG asset. A product screenshot, marketing banner, or UI export often contains multiple elements. Cropping to the specific element and wrapping it in SVG produces a self-contained, properly-dimensioned asset.
- You want to embed a cropped PNG in an SVG document. SVG files produced by this tool can be further embedded in larger SVG compositions, used as
<img>sources, or referenced via<use>in icon spritesheet patterns. - You need a PNG region delivered via an SVG file without using command-line tools. For quick, one-off conversions in a browser — especially in environments where installing ImageMagick, Inkscape, or scripting tools is not practical — this tool provides the same output without any local software dependency.
Transparency Handling
PNG supports full alpha-channel transparency at per-pixel precision. When you crop a PNG with transparent areas and wrap it in SVG, the transparency is preserved in the embedded PNG data URI. The <image> element in the output SVG renders the embedded PNG with its original alpha values intact — transparent pixels remain transparent, and semi-transparent pixels retain their exact opacity.
This is one of the practical advantages of the raster-in-SVG approach: unlike some format conversions (such as PNG to JPEG, which must flatten transparency against a background color), embedding a PNG in SVG preserves the full alpha channel without any approximation. Your transparent icons, logos, and UI elements remain correctly transparent in the output SVG.
File Size Considerations
SVG files produced by this tool contain the full PNG pixel data encoded as a base64 string. Base64 encoding adds approximately 33% overhead to the binary PNG data. As a result, the output .svg file will typically be 30–35% larger than an equivalent standalone .png file of the same crop area. This is expected and unavoidable when embedding binary image data in XML text format.
Cropping before embedding reduces the file size proportionally to the pixels removed. If you need only a 400×300 region from a 1920×1080 PNG, cropping first and then wrapping produces an SVG file roughly 96% smaller than one embedding the full-resolution PNG. Crop as tightly as possible around the content you need to minimize the output file size.
PNG vs SVG: Format Comparison
| Property | PNG | SVG (raster-in-SVG) |
|---|---|---|
| Content type | Raster pixels | XML container wrapping raster pixels |
| Scalability | Fixed resolution | Same as embedded PNG (raster scales like PNG) |
| Transparency | Full alpha channel (0–255) | Preserved via embedded PNG data |
| File format | Binary compressed | XML text + base64-encoded binary data |
| File size vs PNG | Baseline | ~33% larger (base64 overhead) |
| Browser support | Universal | Universal (all modern browsers) |
| Best for | Lossless raster images, source assets | SVG-required pipelines with raster image content |
SVG File Structure
The SVG file produced by this tool follows a straightforward, valid structure. It opens with an XML declaration and the SVG root element with proper namespace declarations. The width and height attributes on the root element match the crop pixel dimensions. The viewBox also matches the crop dimensions, establishing a 1:1 pixel coordinate system. Inside the SVG is a single <image> element positioned at x="0" y="0", sized to fill the full SVG canvas, with preserveAspectRatio="none" and the base64-encoded PNG as the href value.
This structure is compatible with all modern browsers, SVG viewers, design applications (Figma, Illustrator, Inkscape), and SVG processing pipelines. The file opens correctly as an SVG asset in any context that supports the SVG 1.1 specification.
How the Crop and SVG Wrapping Workflow Works
The PNG to SVG Crop Converter loads your file using URL.createObjectURL(file) to create a temporary object URL, assigns it to an HTMLImageElement, and awaits img.decode() before drawing. This guarantees the full pixel decode is complete before any canvas operations begin. The image is drawn onto an HTML5 Canvas scaled to fit the display panel.
An SVG overlay renders the crop rectangle and handles. When you drag a handle, the tool maps canvas coordinates back to the original image's pixel dimensions using a scale factor. When you click Download SVG, an off-screen canvas draws the selected PNG region at full resolution — with transparency preserved by the canvas 2D compositing context — and canvas.toDataURL('image/png') produces the base64-encoded PNG string. The tool then constructs the SVG markup string, creates a Blob, and triggers a browser download as a .svg file. The entire process is synchronous after the canvas draw, with no server round-trip.
Frequently Asked Questions
Is the output SVG actually a vector file?
No. The output is an SVG container file that wraps the cropped PNG pixels inside an <image> element. The visual content is raster — the pixels from your source PNG. No vector paths, shapes, or tracing of any kind is performed. The file is valid SVG markup, but it contains raster image data rather than vector paths.
Does cropping before wrapping in SVG reduce the file size?
Yes — cropping removes pixels from the source image before embedding. A tightly cropped region produces a smaller SVG file than embedding the full-size PNG. Note that SVG files containing base64-encoded PNG data are larger than equivalent standalone PNG files because base64 encoding adds approximately 33% overhead to the binary PNG data.
Is the conversion done in the browser with no upload?
Yes. The PNG to SVG Crop Converter loads your file locally, performs all cropping and SVG wrapping in JavaScript using the HTML5 Canvas API, and produces the download entirely in memory. No file is transmitted to any server at any point. Your image stays on your device throughout the entire process.