@shotstack/schemas 1.3.5 → 1.3.8

package/dist/api.bundled.json

@@ -1193,6 +1193,7 @@
             "html": "#/components/schemas/HtmlAsset",
             "title": "#/components/schemas/TitleAsset",
             "shape": "#/components/schemas/ShapeAsset",
+            "svg": "#/components/schemas/SvgAsset",
             "text-to-image": "#/components/schemas/TextToImageAsset",
             "image-to-video": "#/components/schemas/ImageToVideoAsset"
           }
@@ -1228,6 +1229,9 @@
           {
             "$ref": "#/components/schemas/ShapeAsset"
           },
+          {
+            "$ref": "#/components/schemas/SvgAsset"
+          },
           {
             "$ref": "#/components/schemas/TextToImageAsset"
           },
@@ -2051,6 +2055,838 @@
           "text"
         ]
       },
+      "SvgAsset": {
+        "description": "The SvgAsset is used to add scalable vector graphics (SVG) shapes to a video.\nIt provides a comprehensive set of primitive shapes and custom paths with full\nstyling support including fills, strokes, gradients, and shadows.\n\n**Available Shapes:**\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\n**Styling Options:**\n- Fill with solid colors or linear/radial gradients\n- Stroke with configurable width, color, dash patterns, and line caps/joins\n- Drop shadows with blur, offset, and opacity\n- Transform properties for positioning, rotation, and scaling\n\nSee [W3C SVG 2 Specification](https://www.w3.org/TR/SVG2/) for path data syntax.\n",
+        "type": "object",
+        "properties": {
+          "type": {
+            "description": "The asset type - set to `svg` for SVG shapes.",
+            "type": "string",
+            "enum": [
+              "svg"
+            ],
+            "default": "svg",
+            "example": "svg"
+          },
+          "shape": {
+            "description": "The shape definition. The `type` property within determines the shape kind\nand its specific properties. See individual shape documentation for details.\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",
+            "$ref": "#/components/schemas/SvgFill"
+          },
+          "stroke": {
+            "description": "Stroke (outline) properties for the shape.\nIf omitted, the shape will have no stroke (no outline).\n",
+            "$ref": "#/components/schemas/SvgStroke"
+          },
+          "shadow": {
+            "description": "Drop shadow properties for the shape.\nCreates a shadow effect behind the shape.\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",
+            "$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",
+            "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",
+            "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",
+            "type": "integer",
+            "minimum": 1,
+            "maximum": 4096,
+            "example": 300
+          }
+        },
+        "required": [
+          "type",
+          "shape"
+        ],
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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",
+        "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
+          }
+        }
+      },
       "Transition": {
         "description": "In and out transitions for a clip - i.e. fade in and fade out",
         "properties": {