SVGドキュメントからJSON Schemaを生成する

XMLとしてのSVG：グラフィックスのスキーマ推論

SVG（Scalable Vector Graphics）はXMLベースのフォーマットであり、XMLからJSON Schema変換に自然に適しています。SVGドキュメントは属性が多く、位置、スタイル、変換データが属性として格納されます。

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>

スキーマの特徴

SVGスキーマは属性プロパティが支配的です：

• 位置: @x、@y、@cx、@cy、@width、@height
• スタイル: @fill、@stroke、@stroke-width、@font-size
• 変換: @transform、@viewBox
• 識別子: @id、@class

SVGにおける配列

<g>グループ内の2つの<circle>要素は配列として検出され、両方の円からマージされた属性を持つ配列スキーマが生成されます。同様に、<linearGradient>内の2つの<stop>要素も配列を形成します。

数値属性

SVG属性では興味深い型推論が行われます。200（width）、10（rx）、2（stroke-width）のような値はintegerとして検出されますが、0%と100%はパーセント記号のためstringのままです。#3b82f6のようなfill値はstringです。

SVGスキーマのユースケース

• プログラムで生成されたSVGのバリデーション
• SVGアイコンライブラリの期待される構造の定義
• スキーマバリデーション付きSVGテンプレートシステムの構築
• デザインシステムコンポーネントのSVG構造のドキュメント化