Skip to main content
Jovial_sincerity0138
Participant
September 17, 2026
Question

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

  • September 17, 2026
  • 1 reply
  • 12 views

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!

    1 reply

    Spas K.
    Community Expert
    Spas K.Community Expert
    Community Expert
    September 22, 2026

    Xd prototypes are not really dynamic with real web properties, but rather a map with static assets. Any interactions between a prototype and some sort of API and live data is not possible. Xd is for rough prototyping and layout, rather than building highly functional prototypes with real time data.

    Plugins only function on the design level, and do not support any functionality during prototype viewing and interaction.

    SVG files and paths shouldn't render differently between devices / browsers, unless they use some unsupported attributes in the code, which I doubt. It would be best to post the files in question or screenshots of the issues.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices