HEIC to SVG Crop: Complete Conversion Guide for Web & Design

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

Connect on LinkedIn →

What Is SVG and Why Use It for HEIC Photos?

SVG (Scalable Vector Graphics) is an XML-based file format that describes images using markup. Most SVG files contain vector path data — mathematical descriptions of shapes that scale without pixelation. However, SVG is also a valid container for embedded raster images. Using the <image> element, an SVG file can embed a PNG, JPEG, or any other raster format as a base64 data URI. The resulting file is a standards-compliant SVG that opens in every browser and design tool that supports SVG.

This approach — embedding a cropped raster image inside an SVG wrapper — is what the HEIC to SVG Crop Converter produces. The output is not traced vector artwork. It is a cropped raster image (encoded as PNG) wrapped in an SVG container with correct width, height, and viewBox attributes. This makes the file immediately usable in SVG-based design workflows: Figma, Adobe Illustrator, Inkscape, Affinity Designer, and web browsers all render it natively.

What Is HEIC and Where Does It Come From?

HEIC (High Efficiency Image Container) is the default photo format on iPhones and iPads since iOS 11. It uses HEVC (H.265) video compression to store photos at roughly half the file size of an equivalent JPEG while maintaining comparable visual quality. A typical iPhone photo at 12 megapixels occupies 2–4 MB as HEIC, compared to 5–8 MB as JPEG.

The trade-off is compatibility. Apple devices handle HEIC natively, but Windows requires a codec extension from the Microsoft Store, Linux support is sparse, and most web-based design tools and SVG editors expect formats with universal support. Converting a HEIC photo — especially a cropped region — to SVG bridges this gap and places the image directly in a format that the broadest range of design applications can ingest without codec requirements.

When Should You Crop and Convert HEIC to SVG?

• Importing iPhone photos into SVG-native design tools. Figma and Inkscape work natively with SVG. Dropping an SVG file containing your cropped HEIC photo allows you to treat it as an SVG asset — position it, resize the container, and use it alongside vector elements — without any import conversion step.
• Embedding cropped photos in SVG-based web layouts. If your frontend uses inline SVG or SVG backgrounds, wrapping a cropped HEIC photo as an SVG lets you reference it with a single <img src="photo.svg"> tag or as a CSS background. The SVG container can be resized independently from the raster content.
• Delivering assets that must pass an SVG file format check. Some design pipelines, content management systems, or asset repositories accept SVG but not HEIC or JPEG. The PNG-in-SVG output satisfies the SVG file type requirement while preserving your original photo content.
• Archiving a cropped photo region with SVG metadata support. SVG supports embedded <title> and <desc> elements, making the output SVG file more amenable to metadata workflows than raw JPEG or PNG would be.
• Preparing iPhone photos for Illustrator or Affinity Designer workflows. These tools import SVG directly and allow you to add vector annotations, labels, or UI elements on top of your raster photo — treating the SVG image element as a background layer.

HEIC vs SVG (PNG-in-SVG): Format Comparison

What the SVG Output Contains

The HEIC to SVG Crop Converter produces a valid SVG 1.1 file with the following structure: an XML declaration, an <svg> root element with xmlns, xmlns:xlink, width, height, and viewBox attributes set to the cropped pixel dimensions, a <title> element, and a single <image> element with an xlink:href attribute containing the base64-encoded PNG data of the cropped region. The SVG does not contain any vector path data, because no path generation or tracing is performed.

The PNG embedded inside the SVG is generated from the Canvas API using canvas.toBlob() with MIME type image/png. It captures the cropped pixel region at full original HEIC resolution — the display canvas is only used for the interactive overlay. The SVG width and height attributes match the PNG dimensions exactly, so the image displays at one-to-one pixel density with no upscaling or downscaling applied by the SVG container.

How the Crop Workflow Works in the Browser

The HEIC to SVG Crop Converter decodes your HEIC file entirely in the browser using a two-stage approach. First, it attempts native HEIC decoding via createImageBitmap() — available in Chrome 105+, Safari, and Edge. If native support is not available (such as in Firefox), it automatically falls back to the heic2any JavaScript library, which uses a WebAssembly-based HEVC decoder for full cross-browser compatibility. The decoded image is drawn onto an HTML5 Canvas element, and an SVG overlay renders the crop rectangle and handles on top.

When you drag a handle, the tool maps canvas coordinates back to the original image's pixel dimensions using a scale factor (natural width ÷ display width). This ensures the crop is applied at full resolution — the canvas is only a display proxy. When you click Convert & Download SVG, an off-screen canvas draws only the selected region using drawImage with source rectangle parameters. The cropped canvas is converted to a PNG blob via canvas.toBlob(), read as a base64 data URL, and embedded inside the SVG string. No server round-trip is required at any point.

Using the Output SVG in Design Tools

The PNG-in-SVG output is directly importable into Figma, Adobe Illustrator, Inkscape, and Affinity Designer. In Figma, drag and drop the SVG file onto the canvas — it imports as a frame containing the embedded image. In Illustrator, use File → Place or File → Open; the SVG opens with the image element visible and selectable. In Inkscape, open the SVG directly via File → Open; the embedded PNG renders immediately. Because the SVG uses standard xmlns:xlink and xlink:href attributes, the image element is recognized by all compliant SVG processors.

One practical benefit is that you can then add vector elements — text labels, arrows, callouts, UI frames — on top of the raster photo directly in Illustrator or Inkscape, treating the SVG image as a background layer. This is a common workflow for annotating screenshots, product photos, or architectural images sourced from iPhones.

Frequently Asked Questions

Is the SVG output real vector artwork?

No. The output SVG embeds the cropped HEIC photo as a PNG data URI inside an SVG container. This is identical to the approach used by the site's standard HEIC to SVG converter. No path generation, tracing, or vectorization occurs. The pixel content of the photo is stored as a raster PNG. The SVG wrapper provides the file format and container — it does not add vector paths or scalability to the underlying photo content.

Will Figma or Illustrator recognize the embedded image?

Yes. Both Figma and Adobe Illustrator fully support SVG files containing embedded PNG images via the xlink:href attribute. The image imports as an embedded raster element. In Figma it appears as an image fill; in Illustrator it appears as a linked or embedded image object. Inkscape and Affinity Designer also handle the format correctly.

How does the output file size compare to the source HEIC?

The output SVG will typically be larger than the source HEIC. HEIC uses very efficient HEVC compression, while the embedded PNG in the SVG is a lossless format. For a 3000×2000 crop, the PNG data embedded in the SVG will be in the range of 3–15 MB depending on image complexity, compared to a 2–4 MB HEIC source. The SVG XML wrapper adds only a small amount of overhead on top of the PNG data.

Can I use the output SVG directly in a webpage?

Yes. The output SVG can be referenced via an <img> tag, an <object> tag, or inline <svg>. It renders correctly in all modern browsers. If you reference it as an <img src="photo.svg">, the browser loads and displays the embedded PNG image at the SVG's declared dimensions. CSS width and height properties applied to the img element resize the SVG container as expected.

Is the conversion free with no file size limit?

Yes. Because all processing runs entirely in your browser, there is no server to impose a limit. The only practical constraint is your device's available RAM. There are no usage caps, no watermarks, and no account required.