Skip to content

Add SVG component support with runtime fixes#390

Open
bpc-oss wants to merge 1 commit into
nodegui:masterfrom
bpc-oss:feat/svg-support-pr-ready
Open

Add SVG component support with runtime fixes#390
bpc-oss wants to merge 1 commit into
nodegui:masterfrom
bpc-oss:feat/svg-support-pr-ready

Conversation

@bpc-oss

@bpc-oss bpc-oss commented Jun 27, 2026

Copy link
Copy Markdown

Summary

This PR adds SVG component support to react-nodegui using QSvgWidget, and includes the runtime fixes needed to make the feature work reliably.

It covers:

  • Svg root component plus exported helpers like Rect, Circle, Path, and SvgText
  • inline SVG tree serialization
  • src, content, and buffer loading paths
  • mixed text / tspan handling inside SVG text nodes
  • safe child move/reorder behavior in SVG trees
  • a repo-local acceptance command: npm run verify:svg

Fixes #31.

Why this PR

There are already related attempts in #387, #388, and #389. Compared with those branches, this version also fixes the runtime issues that blocked a clean handoff:

  • fixes unbound createInstance behavior for nested SVG elements
  • removes the private @nodegui/nodegui/dist/... dependency
  • adds SVG-specific text update handling in the reconciler
  • fixes reorder semantics so moved SVG children are not duplicated
  • codifies acceptance coverage in-repo instead of relying only on ad hoc smoke commands

Verification

Ran locally:

  • npm run build
  • npm run verify:svg

npm run verify:svg covers:

  • root import smoke
  • README helper shapes
  • lowercase rect
  • SvgText
  • content / buffer / src
  • adjacent text serialization
  • mixed tspan serialization
  • mixed text update after mount
  • reorder / move behavior

Notes

  • SVG text should use SvgText rather than the existing host Text component.
  • Verification is now repo-local and repeatable, though it is still an acceptance harness rather than a full unit/integration test suite.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support for svg in React code.

1 participant