How-to guide

How to convert a screenshot to SVG

Turn a screenshot of a logo, icon, or diagram into a crisp vector.

Screenshots are low-resolution, anti-aliased, and often compressed — the worst possible input for tracing. With the right preparation, though, you can still pull a clean, scalable SVG out of one. This guide covers how.

Try the playground free →

What you need

  • ▸A screenshot containing the artwork you want (PNG is better than JPG)
  • ▸A modern browser
  • ▸Optional: a cropping tool — the OS screenshot tool is enough

Steps

  1. 01
    Capture at the highest resolution you can

    Zoom the source in your browser or app before taking the screenshot. A logo captured at 400% zoom traces dramatically better than one captured at 100%.

  2. 02
    Crop tightly to the artwork

    Remove surrounding UI, text, and background. The tracer should see only the shape you want, or every stray pixel becomes a path.

  3. 03
    Save as PNG, never JPG

    JPG compression adds blocky artefacts around edges that the tracer will faithfully reproduce as ragged paths. PNG is lossless and keeps edges clean.

  4. 04
    Upload to VectorDrop

    Drop the cropped PNG into the playground. The trace runs immediately with a live preview.

  5. 05
    Lower the detail, raise the smoothing

    Screenshots are anti-aliased, which creates a halo of intermediate pixels. Reducing detail and increasing smoothing collapses that halo into a single clean edge.

  6. 06
    Reduce the colour count

    Anti-aliasing invents dozens of near-identical shades. Cutting the colour count down to the handful the artwork actually uses removes most of the noise.

  7. 07
    Export and tidy up

    Download the SVG and open it in Figma or Illustrator to nudge any remaining rough nodes. For a logo, this is usually a minute of work.

Tips

  • ▸A screenshot of a logo is a last resort — always ask for the original vector first
  • ▸Flat, high-contrast artwork traces well; screenshots of photos or gradients do not
  • ▸Retina and HiDPI screens capture at 2x, which is a real quality advantage — use them
  • ▸If the edges stay fuzzy, the source is simply too small; recapture at a higher zoom

Frequently asked questions

Can I vectorise a low-resolution screenshot?

You can, but the tracer can only work with the pixels it is given. Below roughly 200px across, edges become guesswork. Recapture at a higher zoom whenever possible.

Why is my traced screenshot full of tiny stray shapes?

Anti-aliasing and compression artefacts. Lower the detail setting, raise smoothing, and reduce the number of traced colours.

Is it legal to vectorise a logo from a screenshot?

Recreating a logo does not grant you rights to it. Use this for your own brand assets, or where you have permission from the owner.

Ready to vectorise your image?

Upload a PNG, JPG, or WebP and get a clean SVG in seconds. Free and browser-based.

Open the playground →