Automate SVG Base64 Encoding for JSON APIs and Build Scripts

Node — encode a folder into a JSON manifest

Read every .svg in a directory, encode each with the prefix on, and write a name→data-URI map. Zero dependencies, byte-identical to the web tool.

const fs = require("fs");
const path = require("path");

const dir = "./icons";
const manifest = Object.fromEntries(
  fs.readdirSync(dir)
    .filter((f) => f.endsWith(".svg"))
    .map((f) => {
      const svg = fs.readFileSync(path.join(dir, f), "utf-8");
      const b64 = Buffer.from(svg, "utf-8").toString("base64");
      const name = path.basename(f, ".svg");
      return [name, `data:image/svg+xml;base64,${b64}`];
    })
);
fs.writeFileSync("icons.json", JSON.stringify(manifest, null, 2));

Typed TS manifest with as const

Generate a .ts module so consumers get autocomplete and a literal union of icon names. Store bare Base64 here and let the component add the prefix, or include it — your call.

// generate-icons.ts (run with tsx / ts-node)
import fs from "node:fs";

const entries = fs.readdirSync("icons")
  .filter((f) => f.endsWith(".svg"))
  .map((f) => {
    const b64 = Buffer.from(fs.readFileSync(`icons/${f}`)).toString("base64");
    return `  "${f.replace(/\.svg$/, "")}": "${b64}",`;
  });

fs.writeFileSync(
  "icons.ts",
  `export const Icons = {\n${entries.join("\n")}\n} as const;\n` +
  `export type IconName = keyof typeof Icons;\n`
);

Runner — POST a single SVG locally

Pair @jadapps/runner, then dispatch to localhost. The file never touches JAD servers. Note the option name is includePrefix exactly.

// Fetch the schema first (hosted), then run locally:
//   GET  https://<host>/api/v1/tools/svg-to-base64   (auth) → schema
//   POST http://127.0.0.1:9789/v1/tools/svg-to-base64/run

await fetch("http://127.0.0.1:9789/v1/tools/svg-to-base64/run", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    input: "<svg xmlns='http://www.w3.org/2000/svg'>…</svg>",
    options: { includePrefix: false }   // bare Base64
  })
});
// Output: text/plain Base64 string

Feed a PDF library a Base64 SVG

pdfmake / jsPDF accept image data as Base64. Encode each SVG (prefix usually on for jsPDF addImage, off where the lib expects raw) and pass it straight in.

const b64 = Buffer.from(fs.readFileSync("logo.svg")).toString("base64");

// jsPDF (expects a data URI):
doc.addImage(`data:image/svg+xml;base64,${b64}`, "SVG", 10, 10, 40, 12);

// pdfmake (svg property takes raw SVG markup, not Base64 —
// check your library: some want the data URI, some want the source)

Minify the folder, then batch-encode

Run a size pass before encoding so every string is minimal. Conceptually: scrub + minify each file, then encode. Each removed byte is ~1.33 fewer Base64 bytes across the whole manifest.

Pipeline (per file):
  scrub metadata   → /svg-tools/svg-metadata-scrubber
  minify           → /svg-tools/svg-pro-minifier
  encode base64    → Buffer.from(min, 'utf-8').toString('base64')

Result: a manifest that's as small as Base64 allows.
Estimate the win first with /svg-tools/svg-compression-estimator.

There is no hosted batch upload endpoint for SVG encoding. The JAD API is upload-free by design — POST /api/v1/tools/svg-to-base64/run with content returns HTTP 400 and pairing instructions. Batch either with a local Node/Deno script or by POSTing to your paired runner at 127.0.0.1:9789, one file per call.

The only option is includePrefix (camelCase, boolean). A snake_case include_prefix is not recognised by the schema validator and is ignored — you'd silently get the default (prefix on). Match the exact casing the schema endpoint reports.

Calling btoa(svgString) directly throws InvalidCharacterError when the SVG contains characters outside Latin-1 (accents, CJK in <text>). Always do btoa(unescape(encodeURIComponent(svg))) in the browser, or Buffer.from(svg, 'utf-8') in Node. The JAD tool already does this; replicate it in your scripts.

Buffer.from(fs.readFileSync('icon.svg')) (no encoding on readFileSync) still works because the raw bytes are already UTF-8 on disk. But if you read with a wrong encoding (e.g. 'latin1') and then re-encode, multi-byte glyphs corrupt. Read as 'utf-8' (or as a raw Buffer) consistently.

The runner respects the same SVG tier limits as the web tool (5 MB free, 50 MB Pro, 2 GB Developer per job). A pure Node script you run yourself has no such cap — it's bounded only by memory. For a folder of icons you'll never hit either limit; the cap matters only for unusually large single files.

A Base64 manifest is inherently ~33% larger than the raw SVGs (more with prefixes). That's the cost of inlining. If the manifest ships to the client, weigh it against serving the icons as cacheable files. For build-time use it's usually fine; for a giant icon set, reconsider inlining everything.

Decide once whether the generated manifest stores full data: URIs or bare Base64, and apply it to every entry. A mix breaks consumers that blindly prepend the prefix (double data:) or blindly use the value (missing scheme). The web tool's checkbox makes this choice per run — in a script, make it once for the whole batch.

The encoder is byte-faithful and won't validate that a .svg file is actually SVG. A PNG accidentally renamed .svg, or a half-written file, encodes to valid-looking Base64 that renders nothing. Filter strictly on extension and, if untrusted, validate with a DOM parse before encoding.