What does SVG to JSON give me?

A structured object in the Polotno design schema — width and height at the top, then a pages array whose children are typed: text, image, svg (for path-heavy fragments), line, group. Every element has explicit x/y/width/height/rotation and styling properties, so you can manipulate it programmatically without parsing the original SVG markup.

Is this a generic SVG-to-JSON parser?

No. The output uses the Polotno design schema — high-level typed elements (text, image, svg, line, group) with explicit geometry and styling, not a one-to-one dump of the SVG XML tree. If you need XML-as-JSON, use a generic SVG parser. If you need typed design elements you can load into a canvas editor or mutate in code, this is the intended use.

Why convert SVG to JSON?

Three main reasons: you're building a canvas editor and need to load SVG assets as editable layers; you want to read or modify SVG content programmatically without writing an XML parser; or you want to feed the structure to an LLM as data instead of markup.

Can I round-trip JSON → SVG?

Yes. In the Polotno SDK: store.loadJSON(json), then store.toSVG({ pageId }) returns the SVG string. The pivot format is lossless for the structure Polotno understands.

Is this the same as the @polotno/svg-import package?

Yes. This page is a UI on top of svgToJson() from @polotno/svg-import. The same call works in any browser or Node.js app: const json = await svgToJson({ svg: svgString }). See the SVG Import docs in the SDK reference for the full API.

SVG to JSON converter — Polotno design schema

Quick answer

Drop an SVG, get a typed JSON tree (texts, images, paths) using the Polotno design schema.

Formula: SVG → Polotno JSON (browser-only)

Drop a SVG file here to convert it to JSON

or

Runs entirely in your browser. Your file never leaves your device.

Drop an SVG, get back a structured JSON tree in the Polotno design schema — every element typed (text, image, svg, line, group), every property explicit. Not the raw XML tree as JSON; a higher-level format built for canvas editors and programmatic manipulation.

What the JSON looks like

The output is a Polotno design: a top-level width / height and a pages array (always one page for an SVG input). Each page has a children array of typed elements — text, image, svg (for path-heavy fragments), line, group. Geometry is in pixels; colors are hex strings.

Use cases

Loading SVG assets into a canvas editor — the Polotno editor SDK loads this JSON directly via store.loadJSON(). Useful when shipping SVG icon libraries as editable starting points in a design tool.
Programmatic edits — tweak colors, positions, or text values via straight object access, then re-render.
LLM-friendly data— feed the structured tree to a model that's better at JSON than at SVG markup.

The same conversion in code

import { svgToJson } from "@polotno/svg-import";

const text = await file.text();
const json = await svgToJson({ svg: text });

// Load into a Polotno store
import { createStore } from "polotno/model/store";
const store = createStore({ key: "YOUR_KEY" });
store.loadJSON(json);

Full API reference: SVG Import docs.