How to Crop & Convert TIFF to SVG: Step-by-Step Tutorial

By Bill Crawford  ·  March 2026  ·  5 min read  ·  Last updated March 13, 2026

Connect on LinkedIn →

Overview

This tutorial walks through every step of cropping a TIFF image and converting it to an SVG file using the Data Conversion Center TIFF to SVG Crop Converter. The output is an embedded-raster SVG: a valid .svg file containing the cropped PNG data as a base64-encoded <image> element inside an SVG wrapper. The resulting file opens in Figma, Illustrator, Inkscape, Sketch, and every modern browser — with no external image dependencies. Your image never leaves your device.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/tiff-to-svg-crop/ in any modern browser. The tool works in Chrome, Firefox, Edge, and Safari on both desktop and mobile. No sign-in, no extension, and no download required.

Step 2: Load Your TIFF

You have two options for loading your source image:

• Drag and drop. Drag a TIFF file (with a .tiff or .tif extension) from your file manager directly onto the drop zone. The file loads the moment you release it.
• Browse. Click anywhere on the drop zone (or the "Browse Files" link) to open your operating system's file picker. Select your TIFF and click Open.

As soon as the image loads, it appears in the source panel. The blue crop handles appear at the corners and edges, initially set to the full image boundary.

Step 3: Adjust the Crop Area

The crop overlay has eight handles: four at the corners and four at the midpoints of each edge:

• Corner handles (NW, NE, SW, SE). Drag to resize the crop in both dimensions simultaneously — the most common handle for free-form cropping.
• Edge handles (N, S, W, E). Drag to move only that edge, constraining resize to a single axis. Use these to trim one side without affecting the others.
• Interior pan. Click and drag inside the crop rectangle (away from any 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 TIFF resolution. These dimensions become the width, height, and viewBox values in the output SVG.

Step 4: Preview the Crop

Before downloading, click Preview Crop. A pop-up opens showing the cropped region at browser width. The title displays the exact output pixel dimensions (e.g., "Crop Preview — 800 × 600 px"). Verify the composition — check that detail is not clipped at the edges and the framing is correct for your intended use in Figma, Illustrator, or on a web page.

Close the preview with the × button or by clicking outside the modal. Adjust the handles and preview again as needed.

Step 5: Convert & Download the SVG

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

1. Draws the selected pixel region onto an off-screen canvas at full TIFF resolution using drawImage with source rectangle parameters.
2. Exports the canvas crop as a PNG data URL using toDataURL('image/png').
3. Builds the SVG string: an XML declaration, an <svg> root with xmlns, xmlns:xlink, width, height, and viewBox set to the crop's pixel dimensions, and an <image> element with href set to the PNG data URL.
4. Packages the SVG string as a Blob and triggers a browser download.

The file downloads as [original-filename]_crop.svg. For a source file named artwork.tiff, the output is artwork_crop.svg. No server round-trip occurs at any point.

Step 6: Open the SVG in Your Design Tool

The downloaded SVG is immediately usable in design tools:

• Figma. Use File → Import or drag the SVG directly into a Figma frame. The embedded image appears as a placed raster that you can resize, mask, and layer.
• Adobe Illustrator. Use File → Open or File → Place. Illustrator embeds the raster and shows it as a linked image in the Links panel. You can expand, clip, or apply effects.
• Inkscape. Open directly. Inkscape renders the embedded PNG inside the SVG container and allows you to add vector elements on top.
• Web browser. Use the SVG as an <img> source or inline it in HTML. It renders identically in all modern browsers.

Step 7: Start Over (Optional)

To crop and convert a different TIFF, click ↺ Start Over. This clears the current image, resets the crop handles, and returns the tool to its initial drop zone state.

Tips for Best Results

• Crop tightly to reduce file size. The SVG embeds the PNG as base64, adding ~33% overhead over raw PNG size. A tight crop reduces the pixel count, the PNG size, and therefore the SVG file size.
• SVG is not a vector trace. The output embeds your pixels inside an SVG container. It does not trace shapes or convert the image to paths. The visual quality at large display sizes is bounded by your original TIFF resolution.
• Transparency is preserved. The PNG embedded inside the SVG carries the full alpha channel from your TIFF source. Transparent areas will composite correctly in any browser or design tool.
• Large TIFFs produce large SVGs. For web delivery where file size matters, a standalone PNG is more efficient than an embedded-raster SVG. Use SVG specifically when the format wrapper is required — design tool import, SVG composition, or self-contained asset delivery.