Convert a PNG
Menu
All articles

Engineering·5 min read

From a file upload to an SVG download.

The small HTTP integration behind a PNG-to-SVG workflow, with the details that prevent common mistakes.

Vectali team
A visual note from the Vectali journal.
In this article

A conversion integration needs three things: a file, a multipart request, and a place to put the returned SVG. The useful details sit at the boundaries between those steps.

Name the multipart field

Vectali expects an uploaded file in a field named image. Send that using FormData, letting the HTTP client generate the multipart content type and boundary.

const body = new FormData();
body.append("image", file);
const response = await fetch("/api/vectorize", { method: "POST", body });

This relative URL is for a page on the API’s origin. For an application on another origin, call the public endpoint from your application’s server. The current API does not declare CORS headers.

Read the response status

Parse the response carefully and check response.ok before using the result. A missing file or an oversized image should become a useful message, rather than an empty preview.

const result = await response.json().catch(() => null);
if (!response.ok) {
  throw new Error(result?.error ?? "Conversion failed. Please try again.");
}
if (typeof result?.svg !== "string") {
  throw new Error("The conversion response did not include an SVG.");
}

Keep the selected file available after an error. Someone who needs to retry should not have to find the same file again.

Save the string inside the JSON

The API returns JSON, not a raw image response. Its svg property contains the document to save. Writing the entire JSON object into logo.svg leaves you with JSON under an SVG filename.

On a server, write the string as UTF-8. In a browser, make a Blob with the SVG media type and create a temporary object URL for preview or download.

const blob = new Blob([result.svg], { type: "image/svg+xml" });
const objectUrl = URL.createObjectURL(blob);
previewImage.src = objectUrl;
// Revoke objectUrl when the preview is replaced or removed.

Object URLs hold a reference to their data until released. Clean up the old URL when replacing the preview; MDN explains object URL lifetime.

Make the waiting state legible

Show that conversion has started, keep a single request associated with the selected file, and ignore or abort an outdated request if the user chooses a new image.

Display a retry action after failure. Choose your own timeout according to the application and avoid presenting a fixed processing time as a promise.

The code examples include complete Node.js, cURL, JavaScript, and Python requests. The error reference covers recoverable input problems.

Keep exploring

All articles