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

@@ -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)

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)
   }

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')