From 90d1d37113f7add8f3d6a31487408e49efcef66e Mon Sep 17 00:00:00 2001
From: rcoenen <753704+rcoenen@users.noreply.github.com>
Date: Sat, 1 Aug 2026 09:57:32 -0400
Subject: [PATCH] fix(design-jsx): accept inline SVG attributes (#445)

- Validate inline SVG roots against their supported root props
- Leave descendant SVG markup to the SVG renderer instead of Design JSX validation
- Keep warnings for unsupported root props and cover both paths

Co-authored-by: Rob Coenen <753704+rcoenen@users.noreply.github.com>
---
 CHANGELOG.md                           |  1 +
 packages/core/src/design-jsx/render.ts |  9 ++++++++-
 tests/engine/tools/create.test.ts      | 14 ++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2062b8309..e935b5590 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Fixed
 
+- Stop warning AI agents that supported inline SVG attributes were ignored. (#445)
 - Help AI agents discover every shape supported by `create_shape`. (#448)
 - Keep `fill="none"` and `stroke="none"` SVG paths transparent when rendering inline artwork. (#446)
 - Match regional browser languages to supported locales without selecting a secondary language. (#417)
diff --git a/packages/core/src/design-jsx/render.ts b/packages/core/src/design-jsx/render.ts
index 8427b4a68..155e72d20 100644
--- a/packages/core/src/design-jsx/render.ts
+++ b/packages/core/src/design-jsx/render.ts
@@ -140,12 +140,19 @@ function unsupportedPropWarnings(tree: TreeNode): string[] {
   return warnings
 }
 
+const SVG_ROOT_PROPS = new Set([...SUPPORTED_PROPS, 'viewBox', 'body'])
+
 function collectUnsupportedPropWarnings(tree: TreeNode, warnings: string[]): void {
+  const supportedProps = tree.type === 'svg' ? SVG_ROOT_PROPS : SUPPORTED_PROPS
   for (const key of Object.keys(tree.props)) {
-    if (!SUPPORTED_PROPS.has(key)) {
+    if (!supportedProps.has(key)) {
       warnings.push(`Unsupported prop "${key}" on <${tree.type}> is ignored.`)
     }
   }
+
+  // SVG descendants are parsed as markup by renderSvgNode, not as Design JSX nodes.
+  if (tree.type === 'svg') return
+
   for (const child of tree.children) {
     if (isTreeNode(child)) collectUnsupportedPropWarnings(child, warnings)
   }
diff --git a/tests/engine/tools/create.test.ts b/tests/engine/tools/create.test.ts
index 820dd89f9..e1c80a087 100644
--- a/tests/engine/tools/create.test.ts
+++ b/tests/engine/tools/create.test.ts
@@ -85,6 +85,20 @@ describe('render', () => {
     expect(result.warnings).toEqual(['Unsupported prop "mt" on <frame> is ignored.'])
   })
 
+  test('accepts SVG markup attributes without hiding invalid root props', async () => {
+    const { figma } = setupToolTest()
+    const render = getTool('render')
+    const valid = (await render.execute(figma, {
+      jsx: '<svg name="Boat" viewBox="0 0 640 700" size={600}><path d="M380 40 L380 560" stroke="#021A3B" stroke-width="6" fill="none" /></svg>'
+    })) as ToolResult
+    const invalid = (await render.execute(figma, {
+      jsx: '<svg viewBox="0 0 1 1" mt={8}><path d="M0 0 L1 1" /></svg>'
+    })) as ToolResult
+
+    expect(valid.warnings).toBeUndefined()
+    expect(invalid.warnings).toEqual(['Unsupported prop "mt" on <svg> is ignored.'])
+  })
+
   test('get_node exposes text style fields', async () => {
     const { figma } = setupToolTest()
     const render = getTool('render')