How to Crop & Save PNG as SVG: Step-by-Step Tutorial

By Bill Crawford  ·  March 2026  ·  6 min read  ·  Last updated March 12, 2026

Connect on LinkedIn →

Overview

This tutorial walks you through every step of using the PNG to SVG Crop Converter — from loading your source PNG to downloading the final SVG file. The entire process runs in your browser: no account required, no upload to any server, and no software to install.

Before following along, note what the output is: an SVG container file with the cropped PNG pixels embedded inside as a base64 data URI. This is not a vectorized SVG — no tracing or path generation occurs. If you want background on why this approach exists and when to use it, see the complete guide. This tutorial focuses purely on the step-by-step how.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/png-to-svg-crop/ in any modern browser. The tool works in Chrome, Firefox, Edge, and Safari on desktop or mobile. No login, no extension, and no app installation is required.

Step 2: Load Your PNG

You have two ways to load your file:

• Drag and drop. Drag your PNG file from your desktop or file manager and drop it onto the upload area. The dashed border highlights when you hover over it to confirm it is ready to accept the drop.
• Browse Files. Click anywhere in the upload area (or click the "Browse Files" link) to open your system file picker. Select your PNG file and click Open.

The tool accepts PNG files only (.png extension or image/png MIME type). If you drop a non-PNG file, the tool will alert you. Once the file loads, the drop zone is replaced by the two-panel crop interface.

Step 3: Adjust the Crop Handles

The source panel on the left shows your PNG with a dashed blue crop rectangle overlaid on top. By default the crop rectangle covers the entire image. You adjust it using the blue handles around the perimeter:

• Corner handles (NW, NE, SW, SE). Dragging a corner handle resizes both the width and height simultaneously. This is the fastest way to define a crop that changes both dimensions at once.
• Edge handles (N, S, W, E). Dragging an edge handle moves only that edge, constraining the resize to a single axis. Use this to trim from one side without affecting the perpendicular dimension.
• Interior pan. Click and drag anywhere inside the crop rectangle (not on a handle) to reposition the entire selection without changing its dimensions.

As you drag, the crop dimensions badge in the panel header updates in real time to show the output pixel dimensions at full image resolution. These are the exact pixel dimensions of the SVG file that will be downloaded.

Step 4: Preview the Crop

Before committing to a download, click Preview Crop. A pop-up window opens showing the cropped region rendered as a preview at the full output resolution. The pop-up title displays the exact output dimensions (e.g., "Crop Preview — 400 × 300 px"). Transparent areas appear as a checkerboard in the preview so you can confirm exactly how the transparency will look in the output. Use this to verify composition before downloading.

Close the preview with the × button or by clicking outside the modal. Return to the source panel and adjust handles if needed. You can preview as many times as you like.

Step 5: Download the SVG

When you are satisfied with the crop, click Download SVG. The button briefly shows "⏳ Building SVG…" while the tool:

1. Draws the selected pixel region from the decoded PNG onto an off-screen canvas at full image resolution, preserving alpha-channel transparency — no background fill is applied.
2. Calls canvas.toDataURL('image/png') to produce a base64-encoded PNG string of the cropped area.
3. Constructs a valid SVG string with the proper XML declaration, xmlns attributes, width, height, and viewBox matching the crop dimensions, and a single <image> element with the base64 PNG as the href.
4. Creates a Blob from the SVG string and triggers a browser download. The file downloads as [original-filename]_crop.svg.

For a source file named banner.png, the output is banner_crop.svg. The download is immediate — there is no server round-trip.

Step 6: Start Over (Optional)

To crop and convert a different PNG, click ↺ Start Over. This clears the current image, resets the crop handles, and returns the tool to its initial drop zone state. You can then load a new PNG file and repeat the process.

What to Expect: Quality and Transparency

Quality. The SVG output embeds the cropped PNG pixels using lossless canvas.toDataURL('image/png') encoding. No lossy compression is applied — the pixel data in the SVG is identical to the equivalent region of the source PNG. Visual quality is pixel-perfect.

Transparency is fully preserved. The canvas 2D context does not apply any background fill before converting to PNG data. Transparent and semi-transparent pixels from the source PNG are preserved exactly in the embedded PNG data URI. When the SVG is rendered in a browser or design tool, transparent areas are correctly transparent.

File size. The output .svg file contains the full PNG pixel data encoded as base64, which is approximately 33% larger than the equivalent binary PNG. This is expected — it is the nature of embedding binary data in an XML text format. Crop as tightly as possible to minimize the embedded data size.

Tips for Best Results

• Crop as tightly as possible around the subject. Every pixel removed before embedding reduces the output SVG file size proportionally. A tightly cropped SVG is significantly smaller than one wrapping the full canvas.
• Use the preview before downloading. The preview shows you the exact crop region at full resolution and correctly shows transparent areas as a checkerboard. Verify the composition before committing to the download.
• Check the dimensions badge before downloading. The badge shows the full-resolution pixel dimensions of your SVG canvas. Verify these match your target specification before downloading.
• If you need a smaller file for web delivery, consider PNG or AVIF instead. The raster-in-SVG format is ideal when SVG file format is specifically required. If you need maximum compression for web delivery, PNG to AVIF Crop or PNG to WEBP Crop will produce smaller output files.