Generate JSON Schema from SVG Documents

SVG as XML: Schema Inference for Graphics

SVG (Scalable Vector Graphics) is an XML-based format, making it a natural fit for XML-to-JSON-Schema conversion. SVG documents are attribute-heavy, with positioning, styling, and transformation data stored as attributes.

Example SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0)"/>
      <stop offset="100%" style="stop-color:rgb(255,0,0)"/>
    </linearGradient>
  </defs>
  <g transform="translate(10,10)">
    <rect x="0" y="0" width="180" height="80" fill="url(#grad1)" rx="10"/>
    <circle cx="50" cy="130" r="30" fill="#3b82f6" stroke="#1e40af" stroke-width="2"/>
    <circle cx="130" cy="130" r="30" fill="#22c55e" stroke="#15803d" stroke-width="2"/>
  </g>
  <text x="100" y="195" text-anchor="middle" fill="white" font-size="12">SVG Demo</text>
</svg>

Schema Characteristics

SVG schemas are dominated by attribute properties:

• Positioning: @x, @y, @cx, @cy, @width, @height
• Styling: @fill, @stroke, @stroke-width, @font-size
• Transforms: @transform, @viewBox
• Identifiers: @id, @class

Arrays in SVG

The two <circle> elements within the <g> group are detected as an array, producing an array schema with merged attributes from both circles. Similarly, the two <stop> elements within <linearGradient> form an array.

Numeric Attributes

Interesting type inference happens with SVG attributes. Values like 200 (width), 10 (rx), and 2 (stroke-width) are detected as integers, while 0% and 100% remain strings due to the percent sign. The fill values like #3b82f6 are strings.

Use Cases for SVG Schemas

• Validating programmatically generated SVG
• Defining the expected structure for SVG icon libraries
• Building SVG template systems with schema validation
• Documenting the SVG structure for design system components