Polotno

Developer tool

SVG to JSON converter

Convert SVG to a structured JSON design tree in your browser. Output is the Polotno schema — typed elements with explicit position, color, font. Load into a canvas editor, edit programmatically, or feed to an LLM.

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

svg-to-json.ts
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.

Frequently asked questions

Q: 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.

Q: 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.

Q: 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.

Q: 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.

Q: 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.

Related tools

SVG to PDF converter

PDF to JSON converter

PDF to SVG converter

PSD to JSON converter

Want this in your app? Embed Polotno SDK.

Request API keyCompare

TRUSTED BY

100,000+

CREATORS

300+

BUSINESSES

ExpediaUnbounceLovePopPostGridPredis.ai