Skip to content
SVG Code Tools

SVG to JSON Converter

Convert SVG code into a JSON tree of elements and attributes. Great for animating or changing SVG with code. Free SVG to JSON parser.

Something not working? Report a problem

What is the SVG to JSON Converter?

SVG is XML, and XML is awkward to work with in code. A JSON tree is easy to loop over, search and change. Paste your SVG and get every element, attribute and child in JSON.

Choose a full tree with name, attributes and children, or a short form. You can turn attribute names into camelCase, numbers into real numbers, and inline styles into objects.

How to use it

  1. Paste your SVG code, or open an .svg file.
  2. Pick the JSON shape and the options.
  3. Copy the JSON and use it in your code.

Why people like this tool

Full tree

Elements, attributes and children.

Short form

A smaller tag, attrs, children shape.

Real values

Numbers and style objects, if you like.

Cleans up

Drops metadata and editor tags.

How it works, in one picture

Infographic: how to use the SVG to JSON Converter in 3 easy steps: Paste your code, Choose your options and Copy the result. You get: Full tree, Short form, Real values and Cleans up.

Frequently asked questions

Why convert SVG to JSON?
JSON is easy to change in JavaScript. You can find a shape, change its colour or position, and write SVG back, or send it to an animation tool.
Does it keep text inside elements?
Yes. Text and CDATA inside tags are kept as text items. Untick the option to drop them.
Can I turn the JSON back to SVG?
Not on this page. The JSON keeps every element and attribute, so a small script can do it.

You may also like

SVG to Canvas Code Converter

Convert SVG shapes into HTML Canvas JavaScript code. Paths, circles, rectangles, gradients, strokes and transforms become ctx drawing commands.

Open tool

SVG Optimizer & Minifier

Make SVG files smaller. Removes comments, editor data and hidden junk, rounds numbers and shortens paths and colours. Free SVGO style optimizer.

Open tool

SVG to React, Vue & Svelte Converter

Turn SVG code into a clean React, Vue or Svelte component with size and colour props. TypeScript option included. Free online SVGR alternative.

Open tool

SVG to Base64 & Data URI Converter

Turn SVG code into a CSS background-image data URI or a Base64 string. URL-encoded output is smaller than Base64. Copy ready CSS, HTML or a mask.

Open tool

SVG Security Scanner

Check an SVG for scripts, event handlers and bad links before you upload or show it. Get a plain report and a cleaned copy. Free SVG sanitizer.

Open tool

SVG Icon Resizer & Normalizer

Fit SVG icons of any size into a standard 24 x 24 box, centred, with the same padding. Paste many icons at once. Free icon set cleaner.

Open tool