Convert HEIC to SVG

Tracing finds the boundary between areas of different colour and draws a closed path along it. A pencil line has two such boundaries, one on each side, so what comes out is a long thin loop around the line rather than a line. Filled with black it looks exactly right on screen, and for anything that will be displayed or printed that is a complete answer.

It stops being a complete answer the moment a machine follows the paths. A pen plotter draws down one side of every stroke and back up the other. A vinyl cutter cuts the stroke out as a shape. A CNC router with a V-bit follows the outline instead of the drawn line. If the destination is a machine that follows paths, what you need is called centreline tracing or skeletonisation, and it is a different algorithm from the one behind this page.

The algorithm is looking for flat regions, and a whiteboard photographed with a phone has fewer of them than you would think. The board is brighter near the window and grey in the corner, the marker has a sheen where the ceiling light hits it, the last wipe left a faint smear across the middle, and the shot was taken from a chair so the rectangle is a trapezium.

Every one of those becomes geometry. The lighting gradient turns into bands of slightly different white; the sheen becomes an island in the middle of a stroke; the ghosting becomes pale shapes scattered across the drawing. None of it is a failure of the tracer, which is reproducing what is in the picture. It is a reason to fix the picture before tracing it.

Straight on, not at an angle, with the phone parallel to the paper or the board. Even light, with no shadow from your own body across the frame and no lamp reflecting off the surface. Fill the frame with the drawing and nothing else. If the drawing is on paper, the iOS Notes app has a document scanner that flattens the perspective for you, which is a better starting point than a plain photograph.

Then increase the contrast before converting. In the Photos app, raising Contrast and Black Point and dropping Brightness a little pushes the paper towards white and the ink towards black, which collapses exactly the lighting variation that would otherwise become shapes. Two minutes of that does more for the trace than any setting on this page.

The colours setting is the one that matters most, and for line work the answer is the lowest option, 4. A drawing has two colours in it. Everything above two is spent describing the lighting on the paper and the soft edges of the strokes, and each extra level means more paths, a larger file and more small shapes to clean up afterwards.

The default of 8 is aimed at flat illustration — a logo with a few solid colours, an icon, a printed diagram. Sixteen and thirty-two exist for pictures with real shading, and choosing them for a sketch produces a much bigger SVG that is not any more accurate about the lines you drew. Try 4 first and only go up if something you needed disappeared.

The detail setting controls two things: how loosely a straight line or a curve may be fitted to a run of edge pixels, and how small a shape has to be before it is discarded. Smooth discards anything under 16 pixels, balanced under 8, sharp under 2.

That threshold is the one to think about with a phone photograph, because a camera edge is never clean — sensor noise and antialiasing leave a fringe of intermediate pixels along every stroke, and each of those can become a speck of its own path. Smooth is usually right for a photographed drawing: it throws away the fringe and rounds the corners slightly. Sharp is for a source that was already clean, like a screenshot or a scan, and on a phone photograph it faithfully traces the noise.

A blur before tracing would suppress the specks, and every tracing tool offers one. It is fixed at zero here because it removes them by softening the sharp edges that are the entire reason to trace, and a rounded, slightly melted version of your drawing is a poor trade for a smaller path count.

The discard threshold does the same job without that cost: it removes shapes below a size rather than blurring everything above it. If your trace is full of specks, raise the detail setting towards smooth or clean the source picture up, rather than looking for a blur control that is not there on purpose.

Whatever the input, the picture is scaled so its longest edge is at most 1,600 pixels before tracing begins. A 12-megapixel iPhone frame is 4,032 pixels across, so it is reduced by about a factor of two and a half.

This costs nothing that matters. The output is resolution-independent — paths traced at 1,600 pixels and paths traced at 4,032 render identically at any size — and what changes is only how tightly the outlines hug the original pixel grid. What it buys is a conversion that finishes in seconds instead of tens of seconds and an SVG measured in kilobytes rather than megabytes, because tracing cost grows with the number of edges and a large photograph has an edge nearly everywhere.

The most reliable signal about whether a trace went well is not a preview, it is arithmetic. If the SVG is smaller than or comparable to the source, the picture had genuine flat regions and the trace found them. If it is several times larger, the tracer was fighting the image and turning texture into thousands of tiny paths.

Both numbers are shown after the conversion, so the check takes no effort. A measured case worth knowing: a screenshot containing text traced to an SVG forty times the size of the PNG, because every antialiased letter became its own pile of paths. Handwriting on a whiteboard behaves the same way. If that is what you see, the answer is not a different setting, it is a different approach.

Assume the SVG is a starting point rather than a finished drawing. Open it in Inkscape, Illustrator or Figma and expect to do three things: delete the background rectangle if one was traced, select and remove the leftover specks, and join or simplify the paths where the tracer split a single stroke into several.

For a floor plan or a technical drawing there is a fourth: nothing in the trace knows about scale, straightness or right angles. Lines that were meant to be parallel are not, and a wall that was 4 metres long is now an arbitrary number of user units. If measurements matter, the trace is a tracing template to draw over, not a drawing to measure.

Everything runs in the page: libheif decodes the HEIC, a canvas scales it, and imagetracerjs — 46 KB of plain JavaScript — does the tracing. No request carries the picture, which you can confirm in the network tab or by disconnecting the machine first.

That is not an abstract benefit here. The things people photograph and want to vectorise are meeting whiteboards, product sketches, site plans and patterns, which is to say unpublished work. Being able to try four settings on it without any of them leaving the laptop is the difference between using the tool and not using it.