@shotstack/schemas 1.7.1 → 1.8.2

package/dist/api.bundled.json

@@ -1934,7 +1934,49 @@
           },
           "font": {
             "description": "Font styling properties for inactive words.",
-            "$ref": "#/components/schemas/RichTextFont"
+            "properties": {
+              "family": {
+                "description": "The font family name. This must be the Family name embedded in the font, i.e. \"Roboto\".",
+                "type": "string",
+                "example": "Roboto",
+                "default": "Roboto"
+              },
+              "size": {
+                "description": "The size of the font in pixels (px). Must be between 1 and 500.",
+                "type": "integer",
+                "minimum": 1,
+                "maximum": 500,
+                "default": 24,
+                "example": 48
+              },
+              "weight": {
+                "description": "The weight of the font. Can be a number (100-900) or a string ('normal', 'bold', etc.). 100 is lightest, 900 is heaviest (boldest).",
+                "default": "400"
+              },
+              "color": {
+                "description": "The text color using hexadecimal color notation.",
+                "type": "string",
+                "pattern": "^#[A-Fa-f0-9]{6}$",
+                "default": "#ffffff",
+                "example": "#ffffff"
+              },
+              "opacity": {
+                "description": "The opacity of the text where 1 is opaque and 0 is transparent.",
+                "type": "number",
+                "minimum": 0,
+                "maximum": 1,
+                "default": 1,
+                "example": 0.9
+              },
+              "background": {
+                "description": "The background color behind the text using hexadecimal color notation.",
+                "type": "string",
+                "pattern": "^#[A-Fa-f0-9]{6}$",
+                "example": "#000000"
+              }
+            },
+            "additionalProperties": false,
+            "type": "object"
           },
           "style": {
             "description": "Text style properties including spacing, line height, and transformations.",
@@ -2461,11 +2503,11 @@
         ]
       },
       "SvgAsset": {
-        "description": "The SvgAsset is used to add scalable vector graphics (SVG) shapes to a video.\nIt provides two mutually exclusive ways to define shapes:\n\n**Option 1: Import SVG markup using `src`**\n```json\n{\n  \"type\": \"svg\",\n  \"src\": \"<svg width=\\\"100\\\" height=\\\"100\\\"><circle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"40\\\" fill=\\\"#FF0000\\\"/></svg>\"\n}\n```\nWhen using `src`, no other properties are allowed. The fill, stroke, and dimensions\nare automatically extracted from the SVG markup.\n\n**Option 2: Define shapes programmatically using `shape`**\n```json\n{\n  \"type\": \"svg\",\n  \"shape\": { \"type\": \"circle\", \"radius\": 50 },\n  \"fill\": { \"type\": \"solid\", \"color\": \"#FF0000\" }\n}\n```\nWhen using `shape`, you can customize fill, stroke, shadow, transform, and other properties.\nThe `src` property is not allowed in this mode.\n\n**Important:** You must provide either `src` OR `shape`, but not both.\nThese two modes are mutually exclusive.\n\n**Available Shapes (Option 2 only):**\n- `rectangle` - Rectangles with optional rounded corners\n- `circle` - Perfect circles\n- `ellipse` - Ellipses/ovals with separate x and y radii\n- `line` - Straight lines with configurable thickness\n- `polygon` - Regular polygons (triangle, pentagon, hexagon, etc.)\n- `star` - Multi-pointed stars\n- `arrow` - Directional arrows\n- `heart` - Heart shapes\n- `cross` - Plus/cross shapes\n- `ring` - Donut/ring shapes\n- `path` - Custom shapes using SVG path data\n\nSee [W3C SVG 2 Specification](https://www.w3.org/TR/SVG2/) for path data syntax.\n",
+        "description": "The SvgAsset is used to create scalable vector graphic (SVG) assets using\nraw SVG markup.\n\n```json\n{\n  \"type\": \"svg\",\n  \"src\": \"<svg width=\\\"100\\\" height=\\\"100\\\"><circle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"40\\\" fill=\\\"#FF0000\\\"/></svg>\"\n}\n```\n\nSee [W3C SVG 2 Specification](https://www.w3.org/TR/SVG2/) for SVG markup syntax.\n",
         "type": "object",
         "properties": {
           "type": {
-            "description": "The asset type - set to `svg` for SVG shapes.",
+            "description": "The asset type - set to `svg` for SVG assets.",
             "type": "string",
             "enum": [
               "svg"
@@ -2474,847 +2516,21 @@
             "example": "svg"
           },
           "src": {
-            "description": "Raw SVG markup string to import. When provided, the shape is extracted\nautomatically from the SVG content.\n\n**Supported elements:** `<path>`, `<rect>`, `<circle>`, `<ellipse>`,\n`<line>`, `<polygon>`, `<polyline>`\n\n**Automatically extracted:**\n- Path data (converted to a single combined path)\n- Fill color (from `fill` attribute or `style`)\n- Stroke color and width (from attributes or `style`)\n- Dimensions (from `width`/`height` or `viewBox`)\n- Opacity (from `opacity` attribute)\n\n**Important:** When using `src`, no other properties (shape, fill, stroke, etc.)\nare allowed. All styling must be defined within the SVG markup itself.\n",
+            "description": "Raw SVG markup string to import.\n\n**Supported elements:** `<path>`, `<rect>`, `<circle>`, `<ellipse>`,\n`<line>`, `<polygon>`, `<polyline>`\n",
             "type": "string",
             "minLength": 1,
             "maxLength": 500000,
             "example": "<svg width=\"100\" height=\"100\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"#3498db\"/></svg>"
-          },
-          "shape": {
-            "description": "The shape definition using primitives. The `type` property within determines\nthe shape kind and its specific properties.\n\n**Important:** When using `shape`, the `src` property is not allowed.\n",
-            "$ref": "#/components/schemas/SvgShape"
-          },
-          "fill": {
-            "description": "Fill properties for the shape interior.\nCan be a solid color or a gradient (linear/radial).\nIf omitted, the shape will have no fill (transparent interior).\n\n**Note:** Only allowed when using `shape`, not with `src`.\n",
-            "$ref": "#/components/schemas/SvgFill"
-          },
-          "stroke": {
-            "description": "Stroke (outline) properties for the shape.\nIf omitted, the shape will have no stroke (no outline).\n\n**Note:** Only allowed when using `shape`, not with `src`.\n",
-            "$ref": "#/components/schemas/SvgStroke"
-          },
-          "shadow": {
-            "description": "Drop shadow properties for the shape.\nCreates a shadow effect behind the shape.\n\n**Note:** Only allowed when using `shape`, not with `src`.\n",
-            "$ref": "#/components/schemas/SvgShadow"
-          },
-          "transform": {
-            "description": "Transform properties for positioning, rotating, and scaling the shape.\nThe transform is applied relative to the transformation origin.\n\n**Note:** Only allowed when using `shape`, not with `src`.\n",
-            "$ref": "#/components/schemas/SvgTransform"
-          },
-          "opacity": {
-            "description": "The overall opacity of the entire shape (including fill, stroke, and shadow).\n`1` is fully opaque, `0` is fully transparent.\nThis is applied on top of individual fill/stroke/shadow opacity values.\n\n**Note:** Only allowed when using `shape`, not with `src`.\n",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 1,
-            "default": 1,
-            "example": 1
-          },
-          "width": {
-            "description": "The width of the bounding box in pixels.\nIf specified, the shape may be scaled to fit within this width.\nIf omitted, the shape uses its natural dimensions.\n\n**Note:** Only allowed when using `shape`, not with `src`.\n",
-            "type": "integer",
-            "minimum": 1,
-            "maximum": 4096,
-            "example": 400
-          },
-          "height": {
-            "description": "The height of the bounding box in pixels.\nIf specified, the shape may be scaled to fit within this height.\nIf omitted, the shape uses its natural dimensions.\n\n**Note:** Only allowed when using `shape`, not with `src`.\n",
-            "type": "integer",
-            "minimum": 1,
-            "maximum": 4096,
-            "example": 300
           }
         },
         "additionalProperties": false,
         "required": [
-          "type"
+          "type",
+          "src"
         ],
         "example": {
           "type": "svg",
-          "shape": {
-            "type": "star",
-            "points": 5,
-            "outerRadius": 100,
-            "innerRadius": 50
-          },
-          "fill": {
-            "type": "linear",
-            "angle": 45,
-            "stops": [
-              {
-                "offset": 0,
-                "color": "#FFD700"
-              },
-              {
-                "offset": 1,
-                "color": "#FF6B6B"
-              }
-            ],
-            "opacity": 1
-          },
-          "stroke": {
-            "color": "#2C3E50",
-            "width": 3,
-            "opacity": 1,
-            "lineCap": "round",
-            "lineJoin": "round"
-          },
-          "transform": {
-            "x": 200,
-            "y": 150,
-            "rotation": 0,
-            "scale": 1
-          },
-          "opacity": 1
-        }
-      },
-      "SvgShape": {
-        "description": "The shape definition for an SVG asset. Each shape type has its own specific\nproperties. The `type` field determines which shape is rendered.\n",
-        "oneOf": [
-          {
-            "$ref": "#/components/schemas/SvgRectangleShape"
-          },
-          {
-            "$ref": "#/components/schemas/SvgCircleShape"
-          },
-          {
-            "$ref": "#/components/schemas/SvgEllipseShape"
-          },
-          {
-            "$ref": "#/components/schemas/SvgLineShape"
-          },
-          {
-            "$ref": "#/components/schemas/SvgPolygonShape"
-          },
-          {
-            "$ref": "#/components/schemas/SvgStarShape"
-          },
-          {
-            "$ref": "#/components/schemas/SvgArrowShape"
-          },
-          {
-            "$ref": "#/components/schemas/SvgHeartShape"
-          },
-          {
-            "$ref": "#/components/schemas/SvgCrossShape"
-          },
-          {
-            "$ref": "#/components/schemas/SvgRingShape"
-          },
-          {
-            "$ref": "#/components/schemas/SvgPathShape"
-          }
-        ],
-        "discriminator": {
-          "propertyName": "type",
-          "mapping": {
-            "rectangle": "#/components/schemas/SvgRectangleShape",
-            "circle": "#/components/schemas/SvgCircleShape",
-            "ellipse": "#/components/schemas/SvgEllipseShape",
-            "line": "#/components/schemas/SvgLineShape",
-            "polygon": "#/components/schemas/SvgPolygonShape",
-            "star": "#/components/schemas/SvgStarShape",
-            "arrow": "#/components/schemas/SvgArrowShape",
-            "heart": "#/components/schemas/SvgHeartShape",
-            "cross": "#/components/schemas/SvgCrossShape",
-            "ring": "#/components/schemas/SvgRingShape",
-            "path": "#/components/schemas/SvgPathShape"
-          }
-        }
-      },
-      "SvgRectangleShape": {
-        "description": "A rectangle shape with optional rounded corners.\nThe rectangle is defined by its width and height dimensions.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The shape type - set to `rectangle`.",
-            "type": "string",
-            "enum": [
-              "rectangle"
-            ]
-          },
-          "width": {
-            "description": "The width of the rectangle in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 4096,
-            "example": 200
-          },
-          "height": {
-            "description": "The height of the rectangle in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 4096,
-            "example": 100
-          },
-          "cornerRadius": {
-            "description": "The corner radius for rounded corners in pixels.\nSet to `0` for sharp corners. The radius is automatically clamped\nto half of the smallest dimension.\n",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 2048,
-            "default": 0,
-            "example": 10
-          }
-        },
-        "required": [
-          "type",
-          "width",
-          "height"
-        ]
-      },
-      "SvgCircleShape": {
-        "description": "A perfect circle shape defined by its radius.\nThe circle is centered at the shape's position.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The shape type - set to `circle`.",
-            "type": "string",
-            "enum": [
-              "circle"
-            ]
-          },
-          "radius": {
-            "description": "The radius of the circle in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 2048,
-            "example": 50
-          }
-        },
-        "required": [
-          "type",
-          "radius"
-        ]
-      },
-      "SvgEllipseShape": {
-        "description": "An ellipse (oval) shape with separate horizontal and vertical radii.\nThe ellipse is centered at the shape's position.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The shape type - set to `ellipse`.",
-            "type": "string",
-            "enum": [
-              "ellipse"
-            ]
-          },
-          "radiusX": {
-            "description": "The horizontal radius (semi-major axis) in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 2048,
-            "example": 80
-          },
-          "radiusY": {
-            "description": "The vertical radius (semi-minor axis) in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 2048,
-            "example": 50
-          }
-        },
-        "required": [
-          "type",
-          "radiusX",
-          "radiusY"
-        ]
-      },
-      "SvgLineShape": {
-        "description": "A straight line shape with a specified length and thickness.\nThe line is drawn horizontally by default and can be rotated using transform.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The shape type - set to `line`.",
-            "type": "string",
-            "enum": [
-              "line"
-            ]
-          },
-          "length": {
-            "description": "The length of the line in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 4096,
-            "example": 100
-          },
-          "thickness": {
-            "description": "The thickness of the line in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 500,
-            "example": 4
-          }
-        },
-        "required": [
-          "type",
-          "length",
-          "thickness"
-        ]
-      },
-      "SvgPolygonShape": {
-        "description": "A regular polygon shape with a specified number of sides.\nExamples: triangle (3), square (4), pentagon (5), hexagon (6), etc.\nThe polygon is inscribed in a circle of the given radius.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The shape type - set to `polygon`.",
-            "type": "string",
-            "enum": [
-              "polygon"
-            ]
-          },
-          "sides": {
-            "description": "The number of sides of the polygon.\nMinimum 3 (triangle), maximum 100 for practical use.\n",
-            "type": "integer",
-            "minimum": 3,
-            "maximum": 100,
-            "example": 6
-          },
-          "radius": {
-            "description": "The radius of the circumscribed circle in pixels.\nThis determines the size of the polygon.\n",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 2048,
-            "example": 50
-          }
-        },
-        "required": [
-          "type",
-          "sides",
-          "radius"
-        ]
-      },
-      "SvgStarShape": {
-        "description": "A star shape with a specified number of points.\nThe star is defined by outer and inner radii, creating the characteristic\npointed appearance.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The shape type - set to `star`.",
-            "type": "string",
-            "enum": [
-              "star"
-            ]
-          },
-          "points": {
-            "description": "The number of points on the star.\nMinimum 3 for a triangle-like star, typically 5 for a classic star.\n",
-            "type": "integer",
-            "minimum": 3,
-            "maximum": 100,
-            "example": 5
-          },
-          "outerRadius": {
-            "description": "The outer radius in pixels - the distance from center to the tips of the points.\n",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 2048,
-            "example": 50
-          },
-          "innerRadius": {
-            "description": "The inner radius in pixels - the distance from center to the inner vertices.\nShould be smaller than outerRadius for a star effect.\n",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 2048,
-            "example": 25
-          }
-        },
-        "required": [
-          "type",
-          "points",
-          "outerRadius",
-          "innerRadius"
-        ]
-      },
-      "SvgArrowShape": {
-        "description": "An arrow shape pointing to the right by default.\nUse transform rotation to change direction.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The shape type - set to `arrow`.",
-            "type": "string",
-            "enum": [
-              "arrow"
-            ]
-          },
-          "length": {
-            "description": "The total length of the arrow from tail to tip in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 4096,
-            "example": 100
-          },
-          "headWidth": {
-            "description": "The width of the arrow head (the widest part) in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 1000,
-            "example": 40
-          },
-          "headLength": {
-            "description": "The length of the arrow head portion in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 1000,
-            "example": 30
-          },
-          "shaftWidth": {
-            "description": "The width of the arrow shaft (body) in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 1000,
-            "example": 20
-          }
-        },
-        "required": [
-          "type",
-          "length",
-          "headWidth",
-          "headLength",
-          "shaftWidth"
-        ]
-      },
-      "SvgHeartShape": {
-        "description": "A heart shape commonly used for love/like icons.\nThe heart is defined by a single size parameter.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The shape type - set to `heart`.",
-            "type": "string",
-            "enum": [
-              "heart"
-            ]
-          },
-          "size": {
-            "description": "The size of the heart in pixels.\nThis determines both the width and height proportionally.\n",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 4096,
-            "example": 100
-          }
-        },
-        "required": [
-          "type",
-          "size"
-        ]
-      },
-      "SvgCrossShape": {
-        "description": "A cross or plus shape with equal or different arm lengths.\nCan be styled as a plus sign (+) or a cross (x with rotation).\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The shape type - set to `cross`.",
-            "type": "string",
-            "enum": [
-              "cross"
-            ]
-          },
-          "width": {
-            "description": "The total width of the cross in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 4096,
-            "example": 100
-          },
-          "height": {
-            "description": "The total height of the cross in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 4096,
-            "example": 100
-          },
-          "thickness": {
-            "description": "The thickness of the cross arms in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 500,
-            "example": 20
-          }
-        },
-        "required": [
-          "type",
-          "width",
-          "height",
-          "thickness"
-        ]
-      },
-      "SvgRingShape": {
-        "description": "A ring (donut/annulus) shape - a circle with a circular hole in the center.\nThe ring is defined by outer and inner radii.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The shape type - set to `ring`.",
-            "type": "string",
-            "enum": [
-              "ring"
-            ]
-          },
-          "outerRadius": {
-            "description": "The outer radius of the ring in pixels.",
-            "type": "number",
-            "minimum": 1,
-            "maximum": 2048,
-            "example": 50
-          },
-          "innerRadius": {
-            "description": "The inner radius (hole) of the ring in pixels.\nMust be smaller than outerRadius.\n",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 2048,
-            "example": 30
-          }
-        },
-        "required": [
-          "type",
-          "outerRadius",
-          "innerRadius"
-        ]
-      },
-      "SvgPathShape": {
-        "description": "A custom shape defined by SVG path data.\nSupports all standard SVG path commands for creating complex shapes.\n\n**Path Commands:**\n- `M x y` / `m dx dy` - Move to (absolute/relative)\n- `L x y` / `l dx dy` - Line to\n- `H x` / `h dx` - Horizontal line to\n- `V y` / `v dy` - Vertical line to\n- `C x1 y1 x2 y2 x y` / `c` - Cubic Bezier curve\n- `S x2 y2 x y` / `s` - Smooth cubic Bezier\n- `Q x1 y1 x y` / `q` - Quadratic Bezier curve\n- `T x y` / `t` - Smooth quadratic Bezier\n- `A rx ry angle large-arc sweep x y` / `a` - Elliptical arc\n- `Z` / `z` - Close path\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The shape type - set to `path`.",
-            "type": "string",
-            "enum": [
-              "path"
-            ]
-          },
-          "d": {
-            "description": "The SVG path data string defining the shape.\nUses standard SVG path commands (M, L, C, Q, A, Z, etc.).\nExample: `M 0 0 L 100 0 L 100 100 L 0 100 Z` draws a square.\n",
-            "type": "string",
-            "minLength": 1,
-            "maxLength": 100000,
-            "example": "M 0 0 L 100 0 L 50 86.6 Z"
-          }
-        },
-        "required": [
-          "type",
-          "d"
-        ]
-      },
-      "SvgFill": {
-        "description": "Fill properties for SVG shapes. Supports solid colors and gradients.\nThe fill defines how the interior of a shape is painted.\n",
-        "oneOf": [
-          {
-            "$ref": "#/components/schemas/SvgSolidFill"
-          },
-          {
-            "$ref": "#/components/schemas/SvgLinearGradientFill"
-          },
-          {
-            "$ref": "#/components/schemas/SvgRadialGradientFill"
-          }
-        ],
-        "discriminator": {
-          "propertyName": "type",
-          "mapping": {
-            "solid": "#/components/schemas/SvgSolidFill",
-            "linear": "#/components/schemas/SvgLinearGradientFill",
-            "radial": "#/components/schemas/SvgRadialGradientFill"
-          }
-        }
-      },
-      "SvgSolidFill": {
-        "description": "A solid color fill for SVG shapes.",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The fill type - set to `solid` for a single color fill.",
-            "type": "string",
-            "enum": [
-              "solid"
-            ],
-            "default": "solid"
-          },
-          "color": {
-            "description": "The fill color using hexadecimal color notation (e.g., `#FF0000` for red).\nMust be a 6-digit hex color code prefixed with `#`.\n",
-            "type": "string",
-            "pattern": "^#[A-Fa-f0-9]{6}$",
-            "default": "#000000",
-            "example": "#3498db"
-          },
-          "opacity": {
-            "description": "The opacity of the fill where `1` is fully opaque and `0` is fully transparent.\nValues between 0 and 1 create semi-transparent fills.\n",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 1,
-            "default": 1,
-            "example": 0.8
-          }
-        },
-        "required": [
-          "type",
-          "color"
-        ]
-      },
-      "SvgLinearGradientFill": {
-        "description": "A linear gradient fill that transitions colors along a straight line.\nThe gradient direction is controlled by the `angle` property.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The fill type - set to `linear` for a linear gradient fill.",
-            "type": "string",
-            "enum": [
-              "linear"
-            ]
-          },
-          "angle": {
-            "description": "The angle of the gradient in degrees. `0` is horizontal (left to right),\n`90` is vertical (bottom to top), `180` is right to left, etc.\n",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 360,
-            "default": 0,
-            "example": 45
-          },
-          "stops": {
-            "description": "Array of color stops that define the gradient colors and their positions.\nMust have at least 2 stops. Offsets should increase from 0 to 1.\n",
-            "type": "array",
-            "minItems": 2,
-            "items": {
-              "$ref": "#/components/schemas/SvgGradientStop"
-            }
-          },
-          "opacity": {
-            "description": "The overall opacity of the gradient where `1` is fully opaque and `0` is fully transparent.\n",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 1,
-            "default": 1,
-            "example": 1
-          }
-        },
-        "required": [
-          "type",
-          "stops"
-        ]
-      },
-      "SvgRadialGradientFill": {
-        "description": "A radial gradient fill that transitions colors radiating outward from a center point.\nThe gradient creates a circular or elliptical color transition.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "type": {
-            "description": "The fill type - set to `radial` for a radial gradient fill.",
-            "type": "string",
-            "enum": [
-              "radial"
-            ]
-          },
-          "stops": {
-            "description": "Array of color stops that define the gradient colors and their positions.\nMust have at least 2 stops. Offset `0` is the center, `1` is the outer edge.\n",
-            "type": "array",
-            "minItems": 2,
-            "items": {
-              "$ref": "#/components/schemas/SvgGradientStop"
-            }
-          },
-          "opacity": {
-            "description": "The overall opacity of the gradient where `1` is fully opaque and `0` is fully transparent.\n",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 1,
-            "default": 1,
-            "example": 1
-          }
-        },
-        "required": [
-          "type",
-          "stops"
-        ]
-      },
-      "SvgGradientStop": {
-        "description": "A color stop in a gradient. Each stop defines a color at a specific position\nalong the gradient vector. Gradients require at least 2 stops.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "offset": {
-            "description": "Position of the color stop along the gradient vector.\n`0` represents the start and `1` represents the end of the gradient.\n",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 1,
-            "example": 0.5
-          },
-          "color": {
-            "description": "The color at this stop using hexadecimal color notation.",
-            "type": "string",
-            "pattern": "^#[A-Fa-f0-9]{6}$",
-            "example": "#e74c3c"
-          }
-        },
-        "required": [
-          "offset",
-          "color"
-        ]
-      },
-      "SvgStroke": {
-        "description": "Stroke (outline) properties for SVG shapes. The stroke defines how the outline\nof a shape is painted, including its color, width, and line style.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "color": {
-            "description": "The stroke color using hexadecimal color notation.",
-            "type": "string",
-            "pattern": "^#[A-Fa-f0-9]{6}$",
-            "default": "#000000",
-            "example": "#2c3e50"
-          },
-          "width": {
-            "description": "The width of the stroke in pixels. Must be greater than 0.\nLarger values create thicker outlines.\n",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 100,
-            "default": 1,
-            "example": 2
-          },
-          "opacity": {
-            "description": "The opacity of the stroke where `1` is opaque and `0` is transparent.",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 1,
-            "default": 1,
-            "example": 1
-          },
-          "lineCap": {
-            "description": "The shape at the end of open paths (lines, polylines, unclosed paths).\n<ul>\n  <li>`butt` - flat edge perpendicular to the line (default)</li>\n  <li>`round` - semicircular cap extending beyond the endpoint</li>\n  <li>`square` - rectangular cap extending beyond the endpoint</li>\n</ul>\n",
-            "type": "string",
-            "enum": [
-              "butt",
-              "round",
-              "square"
-            ],
-            "default": "butt",
-            "example": "round"
-          },
-          "lineJoin": {
-            "description": "The shape at the corners where two lines meet.\n<ul>\n  <li>`miter` - sharp corner (default)</li>\n  <li>`round` - rounded corner</li>\n  <li>`bevel` - flattened corner</li>\n</ul>\n",
-            "type": "string",
-            "enum": [
-              "miter",
-              "round",
-              "bevel"
-            ],
-            "default": "miter",
-            "example": "round"
-          },
-          "dashArray": {
-            "description": "Pattern of dashes and gaps for the stroke. An array of numbers where\nodd indices are dash lengths and even indices are gap lengths.\nFor example, `[10, 5]` creates 10px dashes with 5px gaps.\n`[10, 5, 2, 5]` creates alternating 10px and 2px dashes with 5px gaps.\n",
-            "type": "array",
-            "items": {
-              "type": "number",
-              "minimum": 0
-            },
-            "example": [
-              10,
-              5
-            ]
-          },
-          "dashOffset": {
-            "description": "Offset for the dash pattern. Positive values shift the pattern\nforward along the path, negative values shift it backward.\n",
-            "type": "number",
-            "default": 0,
-            "example": 5
-          }
-        }
-      },
-      "SvgShadow": {
-        "description": "Drop shadow properties for SVG shapes. Creates a shadow effect behind the shape.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "offsetX": {
-            "description": "Horizontal offset of the shadow in pixels.\nPositive values move the shadow to the right, negative to the left.\n",
-            "type": "number",
-            "default": 0,
-            "example": 4
-          },
-          "offsetY": {
-            "description": "Vertical offset of the shadow in pixels.\nPositive values move the shadow down, negative values move it up.\n",
-            "type": "number",
-            "default": 0,
-            "example": 4
-          },
-          "blur": {
-            "description": "The blur radius of the shadow in pixels. Must be 0 or greater.",
-            "type": "number",
-            "minimum": 0,
-            "default": 0,
-            "example": 8
-          },
-          "color": {
-            "description": "The shadow color using hexadecimal color notation.",
-            "type": "string",
-            "pattern": "^#[A-Fa-f0-9]{6}$",
-            "default": "#000000",
-            "example": "#000000"
-          },
-          "opacity": {
-            "description": "The opacity of the shadow where `1` is opaque and `0` is transparent.",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 1,
-            "default": 0.5,
-            "example": 0.3
-          }
-        }
-      },
-      "SvgTransform": {
-        "description": "Transformation properties for positioning, rotating, and scaling SVG shapes.\n",
-        "type": "object",
-        "additionalProperties": false,
-        "properties": {
-          "x": {
-            "description": "The x-coordinate position of the shape in pixels.\nRelative to the top-left corner of the viewport.\n",
-            "type": "number",
-            "default": 0,
-            "example": 100
-          },
-          "y": {
-            "description": "The y-coordinate position of the shape in pixels.\nRelative to the top-left corner of the viewport.\n",
-            "type": "number",
-            "default": 0,
-            "example": 100
-          },
-          "rotation": {
-            "description": "Rotation angle in degrees. Positive values rotate clockwise,\nnegative values rotate counter-clockwise. Range: -360 to 360.\n",
-            "type": "number",
-            "minimum": -360,
-            "maximum": 360,
-            "default": 0,
-            "example": 45
-          },
-          "scale": {
-            "description": "Scale factor for the shape. `1` is original size, `2` is double size,\n`0.5` is half size. Must be greater than 0.\n",
-            "type": "number",
-            "minimum": 0.01,
-            "maximum": 100,
-            "default": 1,
-            "example": 1.5
-          },
-          "originX": {
-            "description": "The x-coordinate of the transformation origin as a value from 0 to 1.\n`0` is the left edge, `0.5` is the center, `1` is the right edge.\n",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 1,
-            "default": 0.5,
-            "example": 0.5
-          },
-          "originY": {
-            "description": "The y-coordinate of the transformation origin as a value from 0 to 1.\n`0` is the top edge, `0.5` is the center, `1` is the bottom edge.\n",
-            "type": "number",
-            "minimum": 0,
-            "maximum": 1,
-            "default": 0.5,
-            "example": 0.5
-          }
+          "src": "<svg width=\"100\" height=\"100\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"#3498db\"/></svg>"
         }
       },
       "Transition": {