/image2svg-awesome

All about image tracing and vectorization—the conversion of a raster image (jpg/png) to a vector image (svg).

MIT LicenseMIT

Awesome

Awesome PNG to SVG

PNG to SVG is all about image tracing and vectorization—the conversion of a raster image (jpg/png) to a vector image (svg).

Apps

If you are overwhelmed by the variety of options, the general consensus is:

  • Vector Magic is the gold standard at $300
  • Potrace is the open source champ for monochrome images
  • Inkscape is the best free app option for color images (built on potrace)
  • Mac apps like Super Vectorizer are a decent value for money at $40
  • Getting an Adobe Illustrator subscription solely for image tracing is hard to justify financially at $240/yr

For best results with low resolution images, preprocess them with an AI image upscaler, and then vectorize them.

Many of the apps listed below do not include command line versions, and are impractical to host online. However, they are script-able with apps like Keyboard Maestro and AutoHotkey.

To host your own converter online, check out the open source specifications and code examples below.

Paid options

Free alternatives

I’m always looking for more alternative vectorization software! Create a GitHub issue and I’ll add it to the list.

Specification for NodeJS

The original goal of this document was to outline a specification for NodeJS serverless functions to convert raster images to SVG, and link to other repositories for implementations.

As such, the rest of the document serves as a simple specification for how requests and responses should be structured to convert between raster images and SVG. Check out the related repositories for implementations of the specification.

Related repositories

Matrix

Image Tracing

Serverless

Request

function ImageInput() {
  const [files, setFiles] = React.useState<File[]>();

  const onSubmit = (event) => {
    event.preventDefault();
    if (!files?.length) return;

    async function getSvg() {
      try {
        const formData = new FormData();
        files.forEach((file, index) =>
          formData.append(`image-${index}`, file, file.name)
        );

        const response = await axios.post(url, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        });
      } catch (error) {
        console.log(error)
      }
    }

    getSvg();
  };

  return (
    <form onSubmit={onSubmit}>
      <input
        id="file"
        name="file"
        type="file"
        multiple
        required
        accept="image/jpeg, image/png, image/webp, image/gif, image/svg+xml, image/heic"
        onChange={(event) => {
          const files = Array.from(event.target.files);
          if (files?.length) {
            setFiles(files);
          }
        }}
      />
    </form>
  );
}

Response

{
  "algorithm": "imagetracerjs",
  "files": [
    {
      "fieldName": "image-1",
      "originalName": "demo-one.png",
      "svg": "<svg>…</svg>"
    },
    {
      "fieldName": "image-2",
      "originalName": "demo-two.jpg",
      "svg": "<svg>…</svg>"
    }
  ]
}

Future plans

To support the continued development of this project, consider donating.

  • Add support for color images
  • Plugins for Sketch, Figma, and Adobe XD
  • Compare the results of all the apps over a set of images

WONTFIX

Contributions welcome.

  • inkscape
    • Uses potrace under the hood
  • autotrace
    • Complex build process with web of dependencies