Adobe XD / Web Component: SVG rendering and dynamic data payload issues for regchecker.co.uk interactive widget

Hello Adobe Community,

We are currently designing an interactive web widget and UI prototype for a UK vehicle registration and MOT history platform (regchecker.co.uk).

As part of our design system workflow, we are exporting dynamic SVG graphics and layout components from Adobe XD to integrate directly into our web app frontend.

Design Architecture & Setup:

• Primary Project Domain: (regchecker.co.uk)

• Tooling: Adobe XD (Latest) & Adobe Express Web Embed SDK

• Components: Dynamic vehicle plate display card with real-time tax/MOT status indicators.

Issue / Technical Question:

1. SVG Font & Path Distortions: When exporting interactive vehicle card components from Adobe XD as inline SVGs for regchecker.co.uk, certain custom font weights (UK standard registration plate typography) convert to paths improperly, causing alignment glitches on mobile browsers.

2. Dynamic Data Binding in Prototype: Is there a recommended plugin or Adobe XD API workflow to feed real-time JSON responses (e.g., vehicle search payloads) directly into XD artboard prototypes for live user testing?

What we've tried so far:

• Converted all text layers to outlines before SVG export.

• Tested embedding components using raw CSS grid wrappers.

• Verified that the layout renders correctly on desktop browsers when un-styled.

Any advice on Adobe XD SVG export settings or best practices for real-time web component data binding would be greatly appreciated!

Thanks in advance!