Code examples

Send an image

These examples use standard HTTP clients. The JavaScript request is for a page on the same origin as the API; call from your own server for a different origin.

curl --fail-with-body \
  --request POST \
  --form 'image=@logo.png' \
  https://vectali.com/api/vectorize \
  --output result.json

const form = new FormData();
form.append("image", file);

const response = await fetch("/api/vectorize", {
  method: "POST",
  body: form,
});
const result = await response.json();
if (!response.ok) throw new Error(result.error);

const svg = result.svg;

from pathlib import Path
import requests

with open("logo.png", "rb") as image:
    response = requests.post(
        "https://vectali.com/api/vectorize",
        files={"image": ("logo.png", image, "image/png")},
        timeout=60,
    )
response.raise_for_status()
Path("logo.svg").write_text(response.json()["svg"], encoding="utf-8")

For Python, install requests with python -m pip install requests.

Node.js server integration

Node’s built-in fetch, FormData, and Blob are enough to submit a file. Keep the API URL configurable so your application is not coupled to a local development address.

import { readFile, writeFile } from "node:fs/promises";

const baseUrl = process.env.VECTALI_URL ?? "https://vectali.com";
const bytes = await readFile("logo.png");
const body = new FormData();
body.append("image", new Blob([bytes], { type: "image/png" }), "logo.png");

const response = await fetch(new URL("/api/vectorize", baseUrl), {
  method: "POST",
  body,
  signal: AbortSignal.timeout(60_000),
});
const result = await response.json();
if (!response.ok) throw new Error(result.error ?? "Conversion failed.");
await writeFile("logo.svg", result.svg, "utf8");

The timeout is an application choice, not a promised processing time. Adapt it to your environment and show an understandable failure state when a request takes too long.

Browser preview

Reference a Blob URL from an image instead of assigning arbitrary SVG markup to innerHTML.

const preview = document.querySelector("img[data-preview]");
let previousUrl;

function showSvg(svg) {
  if (previousUrl) URL.revokeObjectURL(previousUrl);
  previousUrl = URL.createObjectURL(
    new Blob([svg], { type: "image/svg+xml" }),
  );
  preview.src = previousUrl;
}

// Also revoke previousUrl when the preview is removed.

Keep the integration small

Check the response status, preserve the original image, and save the returned SVG string. You can introduce your own queue or storage later if your application needs it; neither is required for a single conversion.