TIFF to SVG Crop: Complete Conversion Guide for Scalable Web Assets

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

Connect on LinkedIn →

What Is SVG and Why Does It Matter?

SVG (Scalable Vector Graphics) is an XML-based format for describing two-dimensional graphics. Unlike raster formats — TIFF, PNG, JPEG — SVG images are defined as mathematical descriptions of shapes, paths, and text rather than as grids of pixels. This means an SVG scales to any resolution without pixelation: the same file is equally sharp at 10×10 pixels and at 10,000×10,000 pixels.

SVG is natively supported by every modern browser and widely used for web UI elements, icons, logos, charts, maps, and any graphic that must render crisply across devices of varying pixel densities. Retina and high-DPI displays exposed the inadequacy of fixed-resolution raster assets — SVG solves this definitively for graphics that can be described as paths. For photographic content that must be delivered in an SVG container, the embedded raster approach described here is the standard solution.

Raster Images Inside SVG: The Embedded PNG Approach

SVG is not limited to mathematically defined vector shapes. The SVG specification includes an <image> element that embeds a raster image — either as an external reference or as a base64-encoded data URI — inside the SVG container. This produces a self-contained SVG file that carries its own image data. The SVG wrapper provides the scalable coordinate system and XML structure that design tools expect, while the embedded raster carries the actual pixel content.

This is what the TIFF to SVG Crop Converter produces: an SVG file with correct width, height, and viewBox attributes set to the crop dimensions, and a single <image> element embedding the cropped PNG as a base64 data URI. The result is a single .svg file that opens in Figma, Illustrator, Inkscape, and any browser without requiring a separate image file alongside it.

Why Crop Before Converting to SVG?

Embedding a full-resolution TIFF without cropping first produces an SVG that contains the entire image — usually much more content than needed, and a correspondingly large file due to base64 encoding overhead. Cropping first focuses the embedded PNG on exactly the region you intend to use. Since base64 encoding adds roughly 33% overhead over the raw PNG, minimising the crop area directly reduces SVG file size. Cropping also makes the SVG viewport match the intended display dimensions precisely, simplifying layout work in design tools.

When Should You Crop and Convert TIFF to SVG?

• Importing TIFF content into Figma or Illustrator. Both tools accept SVG with embedded images. An SVG wrapper lets you place a TIFF crop directly into a design document without needing the TIFF import workflow, which varies by tool version and may require plugins.
• Self-contained web assets. An SVG with an embedded PNG can be used as an <img src>, inlined in HTML, or used as a CSS background-image. The image data is contained in one file — no separate asset management required.
• Resolution-independent display at multiple breakpoints. The SVG wrapper allows the browser to scale the image to any CSS dimension. At 1×, 2×, or 3× device pixel ratios, the SVG container scales correctly — visual quality is bounded by the embedded raster resolution, but the layout is always correct.
• Developer and component library workflows. Design systems, icon pipelines, and component libraries often normalise all assets to SVG. Wrapping a TIFF crop in SVG brings it into this pipeline without requiring the developer to handle TIFF decoding.
• Clients and platforms that require SVG input. Some third-party platforms, CMS systems, and publishing tools accept SVG uploads and render them at arbitrary sizes. An SVG wrapping your TIFF crop satisfies this requirement.

TIFF vs SVG: Format Comparison

How the Crop and SVG Generation Works

The TIFF to SVG Crop Converter loads your file using URL.createObjectURL combined with img.decode(), which resolves only after the image is fully decoded, ensuring complete pixel data before the crop overlay renders. When you click Convert, an off-screen canvas renders only the selected pixel region using drawImage with source rectangle coordinates mapped to the full TIFF resolution. The canvas toDataURL('image/png') encodes this as a base64 PNG string.

The tool then constructs a valid SVG 1.1 document: an <svg> root with xmlns, xmlns:xlink, width, height, and viewBox set to the crop pixel dimensions; a <title> element; and a single <image> element with href set to the base64 data URI, dimensions matching the crop, and preserveAspectRatio="none". The SVG text is packaged as a Blob and downloaded as a .svg file. No server is involved at any point.

SVG vs PNG: Choosing the Right Output

If your goal is pure web image delivery — an <img> tag, a CSS background, a responsive image — PNG or AVIF is smaller and simpler. PNG delivers pixel data without base64 overhead; AVIF is even more compact. Choose SVG over PNG specifically when you need: compatibility with SVG-consuming design tools like Figma, inline embedding in HTML without an external file reference, or placement in a pipeline that normalises all assets to SVG format. For pure delivery efficiency, TIFF to PNG Crop or TIFF to AVIF Crop are the right choices.

Frequently Asked Questions

Is the output SVG a true vector file?

The SVG container is vector — it scales without layout pixelation. The embedded image content is raster (a base64 PNG). Visual quality is bounded by the source crop resolution. True raster-to-vector path tracing — converting pixels to Bezier curves — is a separate, much more computationally intensive process not performed by this tool.

Can I open the output SVG in Figma or Illustrator?

Yes. The output is a valid SVG 1.1 document that opens in Figma, Adobe Illustrator, Inkscape, and Sketch. The embedded PNG data travels inside the file — no external image is needed alongside it.

Why is the SVG file large?

Base64 encoding adds roughly 33% overhead over the raw PNG file size. For a large crop, this produces a correspondingly large SVG. If you do not specifically need an SVG wrapper, use TIFF to PNG Crop for a smaller output file.

Is the conversion free with no file size limit?

Yes. All processing runs entirely in your browser — there is no server to impose a limit. No usage caps, no watermarks, no account required.