Document SVG support specification before implementation

[Copilot]

SVG Support Documentation - Complete

• Research SVG elements and attributes to support
• Update README.md with SVG support section
  • Add SVG to allowed tags list (20 new tags)
  • Document SVG-specific attributes (comprehensive table)
  • Add SVG examples (basic shapes, paths, groups)
  • Document SVG with data binding
  • Add examples for gradients, text, animations
  • Document conditional SVG elements
  • Add interactive SVG examples
  • Document SVG icons with symbol/use
  • Add note on security and mixing HTML/SVG
• Update spec.md with SVG support specification
  • Add SVG tags to tag whitelist (Section 11)
  • Document SVG attributes (Section 8)
  • Add comprehensive SVG section (Section 14)
  • Document security considerations
  • Document mixing HTML and SVG
  • Document SVG void elements behavior
• Review and finalize documentation
• Fix $bind/$children pattern in SVG examples

Summary

Added comprehensive documentation for SVG support to both README.md and spec.md without implementing the actual functionality. The documentation includes:

SVG Tags (20 total):

• Container elements: svg, g, defs, symbol, use
• Shapes: circle, rect, ellipse, line, polyline, polygon, path
• Text: text, tspan
• Gradients: linearGradient, radialGradient, stop
• Effects: clipPath, mask, pattern
• Animation: animate, animateTransform

Documentation Includes:

• 11 comprehensive examples in README
• Complete attribute reference for all SVG elements
• Data binding and conditional rendering with SVG
• Security considerations
• Integration with HTML elements
• Full technical specification in spec.md

Latest Update:

• Fixed SVG data binding examples to use correct pattern with $bind and $children on the same container element (g group), matching the established pattern used for HTML elements like ul/li.

The extent of changes shows that SVG support would add significant functionality while maintaining consistency with the existing Treebark template system.

Original prompt

SVG support. before you implement it, just update the readme and the spec so we can see th e extent of the changes.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[danmarshall]

@copilot thanks. I think you have a couple of examples not quite right? I could be wrong but I think $bind / $children are used in unison on the same object. I think your rect example won't work.

[Copilot]

@copilot thanks. I think you have a couple of examples not quite right? I could be wrong but I think $bind / $children are used in unison on the same object. I think your rect example won't work.

You're absolutely right! I fixed the SVG data binding example to use the correct pattern with $bind and $children on the same container element (a g group), matching the established pattern used throughout the documentation for HTML elements like ul/li.

The corrected example now properly wraps the repeated rect elements in a g container that has both $bind: "bars" and $children: [...].

Fixed in commit 4531861.