I was building a board that turns code into diagrams. Its preview looked fine in the browser, and saving the diagram as SVG seemed like the obvious next step. The saved file was a different story: desktop preview and graphics tools would not display it reliably. “It works on the board” was not a test of the artifact I had actually made.
The labels crossed a boundary
The live diagram used HTML labels inside the SVG. That is convenient in a browser, which already knows how to render HTML, but it puts foreignObject elements into the exported file. The viewers I wanted to use did not handle that version as expected.
I kept the live preview as it was and rendered the exported SVG a second time with HTML labels disabled. The resulting file contained no foreignObject elements. It opened in the desktop viewers I checked, while the board still displayed the richer live version.
Two outputs, two contracts
The diagram's content did not need another model pass. The difference belonged to the rendering boundary. One output was for an interactive browser surface; the other was a portable file. Treating them as the same artifact had hidden the compatibility requirement until the file left the app.
That changed how I checked completion. A successful on-screen preview proves the board can show a diagram. A successful export requires opening the saved SVG somewhere else. The second check is small, but it is the only one that answers whether the file can travel.