JPG to SVG

What JPG to SVG is for

JPEG squeezes smooth color into blocks. On a logo or a flat graphic those blocks turn into a ring of tiny paths. This page uses the same tracer as PNG to SVG, but it opens with stronger denoising: fewer colors and a higher speckle filter. It is meant for logos and icons with clear color areas. Photo gradients are outside this version.

Tracing stays in the browser. The image is not uploaded.

Which files

.jpg and .jpeg come first. PNG and WebP can be traced too. One image at a time, up to 8 MB. A long edge above 1024 pixels is scaled down before tracing so the path file stays smaller.

JPEG has no alpha channel. For a transparent logo, use PNG to SVG. The lossy compression is defined in ITU-T T.81, hosted by the W3C.

How the result is shown

The preview loads the cleaned SVG from a blob URL in an image element. MDN's img element reference describes that mode: scripts inside an SVG used as an image do not run. Lettering becomes paths, so the font cannot be changed afterward.

To reshape the result, use the SVG editor. Tracing uses VTracer. If that tracer does not start, a compatibility tracer runs instead and the paths are rougher.

References

• MDN: SVG
• MDN: The img element
• ITU-T T.81 (JPEG) via W3C
• VTracer

Usage

1. Add a JPG

Drop or select a .jpg or .jpeg. The browser reads it with the File API. It is not uploaded to devtool.tech first.

Files over 8 MB are skipped. If several files are selected, only the first is used. A .png or .webp can be traced from this page too. The wider accept list does not change the opening settings, which still assume JPEG noise.

2. Start from the stronger denoise

Logo is the default preset, tuned tighter than a clean PNG: 8 colors to start, and a higher speckle filter. JPEG block edges are part of ITU-T T.81.

• Line art switches to black and white, for strokes.
• Illustration allows more colors, for a flat graphic that is already clean.
• Lower detail drops more specks. Higher detail keeps compression noise as paths.

Tracing starts when you click Trace. If it runs longer than about a second, the page says it is still working. A long edge above 1024 pixels is scaled down first. That scale is canvas pixels, not print DPI. See MDN's SVG guide for the coordinate system.

3. Compare, then download

The original is on the left and the SVG preview is on the right. The preview is an image, not markup inserted into the page, so scripts do not run. See MDN's img element.

Download the .svg or copy the code. The file you get is the cleaned copy.

What to do next

• Both directions on one page: SVG converter
• A source that needs transparency: PNG to SVG
• Edit paths: SVG editor
• Draw the result back to a bitmap: SVG to PNG

References

• MDN: File
• MDN: SVG
• ITU-T T.81 (JPEG) via W3C

FAQ

Will the file be uploaded?

No. Reading, scaling, tracing, and preview stay in the browser.

Why do the edges look dirty?

JPEG leaves blocks and speckle where colors meet. That behavior is specified in ITU-T T.81. This page starts with fewer colors and a higher speckle filter. If the edge is still noisy, lower the detail. Raising detail traces the noise into paths.

Why are photos a poor fit?

Gradients and grain in a portrait or a landscape split apart, and the file is large and hard to edit. This version is for logos and flat graphics. To change a photo's format, use the image converter. That step does not create paths.

How is this different from PNG to SVG?

Both pages share the tracer. This one opens tighter, for JPEG noise, and prefers JPG files. JPEG has no alpha channel. For a transparent logo, use PNG to SVG. Edit paths you already have in the SVG editor.

Why can't I change the font?

The result is paths, not a <text> element. MDN's text element describes real SVG text. During preview the SVG is loaded as an img, so scripts do not run.

References

• ITU-T T.81 (JPEG) via W3C
• MDN: The text element
• MDN: The img element