Convert SVG to JSON

Why Convert SVG to JSON?

Converting SVG to JSON transforms XML-based vector graphics into a structured data format that is natively understood by JavaScript and most modern programming languages. This enables programmatic manipulation of graphic elements, integration with web APIs, and storage in JSON-friendly databases like MongoDB or CouchDB.

JSON representation of SVG data is particularly valuable for web applications that use canvas-based rendering libraries or custom graphic engines. By having SVG element data in JSON format, applications can dynamically construct graphics, apply transformations, and manage complex scenes without parsing XML at runtime.

This conversion also supports design-system workflows where graphic properties such as colors, dimensions, and typography need to be shared between design tools and application code. A JSON file containing SVG element data can serve as a single source of truth for both designers and developers.

Our converter parses the SVG XML tree, extracts all elements with their attributes, text content, and hierarchy, then outputs a well-structured JSON document that preserves the logical structure of the original graphic.

Key Benefits of Converting SVG to JSON:

• API Integration: Use SVG data directly in REST APIs and web services
• JavaScript Native: Parse and manipulate graphic data natively in JS
• Database Storage: Store vector graphic data in NoSQL databases
• Hierarchical Data: Preserve SVG element nesting in JSON objects
• Cross-Platform: JSON libraries available in every language and framework
• Tooling Support: Validate, query, and transform with jq and JSON Schema

Practical Examples

Example 1: Button Icon

Input SVG file (button.svg):

<svg xmlns="http://www.w3.org/2000/svg"
     width="120" height="40">
  <rect width="120" height="40" rx="8"
        fill="#27ae60"/>
  <text x="60" y="26" text-anchor="middle"
        fill="white" font-size="14">Submit</text>
</svg>

Output JSON file (button.json):

{
  "svg": {
    "width": 120,
    "height": 40,
    "elements": [
      {
        "type": "rect",
        "width": 120,
        "height": 40,
        "rx": 8,
        "fill": "#27ae60"
      },
      {
        "type": "text",
        "x": 60,
        "y": 26,
        "textAnchor": "middle",
        "fill": "white",
        "fontSize": 14,
        "content": "Submit"
      }
    ]
  }
}

Example 2: Chart Data Extraction

Input SVG file (chart.svg):

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="200">
  <title>Sales Chart</title>
  <rect x="30" y="100" width="40" height="80"
        fill="#3498db"/>
  <text x="50" y="195">Q1</text>
  <rect x="90" y="60" width="40" height="120"
        fill="#2ecc71"/>
  <text x="110" y="195">Q2</text>
</svg>

Output JSON file (chart.json):

{
  "svg": {
    "width": 300,
    "height": 200,
    "title": "Sales Chart",
    "elements": [
      {"type": "rect", "x": 30, "y": 100,
       "width": 40, "height": 80,
       "fill": "#3498db"},
      {"type": "text", "x": 50, "y": 195,
       "content": "Q1"},
      {"type": "rect", "x": 90, "y": 60,
       "width": 40, "height": 120,
       "fill": "#2ecc71"},
      {"type": "text", "x": 110, "y": 195,
       "content": "Q2"}
    ]
  }
}

Example 3: Design Token Extraction

Input SVG file (palette.svg):

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="50">
  <rect x="0" y="0" width="50" height="50"
        fill="#e74c3c"/>
  <rect x="50" y="0" width="50" height="50"
        fill="#3498db"/>
  <rect x="100" y="0" width="50" height="50"
        fill="#2ecc71"/>
  <rect x="150" y="0" width="50" height="50"
        fill="#f39c12"/>
</svg>

Output JSON file (palette.json):

{
  "svg": {
    "width": 200,
    "height": 50,
    "elements": [
      {"type": "rect", "x": 0,
       "fill": "#e74c3c"},
      {"type": "rect", "x": 50,
       "fill": "#3498db"},
      {"type": "rect", "x": 100,
       "fill": "#2ecc71"},
      {"type": "rect", "x": 150,
       "fill": "#f39c12"}
    ]
  }
}

Frequently Asked Questions (FAQ)

Q: What is SVG format?

A: SVG (Scalable Vector Graphics) is an XML-based vector image format standardized by the W3C. It uses XML elements to define shapes, paths, text, and other graphical objects. SVG files are plain text, resolution-independent, and natively supported by all modern web browsers. They are commonly used for icons, logos, illustrations, and interactive web graphics.

Q: How does SVG XML map to JSON structure?

A: SVG XML elements are converted to JSON objects. Element tag names become "type" properties, XML attributes become object keys, child elements become nested arrays, and text content is captured in "content" fields. The SVG document hierarchy is preserved through nested JSON objects and arrays.

Q: Are SVG path data preserved in JSON?

A: Yes, SVG path data (the "d" attribute containing move, line, curve, and arc commands) is preserved as a string value in the JSON output. The path command string can be parsed further using dedicated SVG path parsing libraries in your target programming language.

Q: Can I use the JSON output with D3.js?

A: Yes, the JSON output is well-suited for use with D3.js and other JavaScript visualization libraries. You can load the JSON data and programmatically reconstruct or transform the SVG elements using D3's data-binding approach, making it easy to create dynamic, data-driven graphics.

Q: What happens to SVG gradients and filters?

A: SVG definitions (defs) including gradients, filters, clip paths, and masks are included in the JSON output as structured objects within a "defs" array. Each gradient stop, filter primitive, and mask element is represented as a nested JSON object with its attributes preserved.

Q: How large is the JSON output compared to SVG?

A: JSON output is typically slightly smaller than the original SVG because JSON syntax uses less markup overhead than XML (no closing tags, shorter attribute syntax). However, for SVGs with extensive path data, the sizes are comparable since path commands remain as string values.

Q: Can the JSON output be stored in MongoDB?

A: Yes, the JSON output is directly compatible with MongoDB and other document databases. You can insert it as a document, query individual elements, and use MongoDB's aggregation pipeline to analyze graphic properties across multiple SVG files stored in your collection.

Q: Are SVG namespaces preserved in JSON?

A: SVG namespace declarations (xmlns) and namespace-prefixed attributes (xlink:href, xml:space) are included in the JSON output. Namespace prefixes are converted to camelCase or colon-separated keys depending on the context, ensuring all attribute data is preserved.