issues with svg rendering local icon images in github

[MxNxPx]

When trying to develop locally referencing images in the relative path of the repo, d2 renders the diagram (in svg) totally fine using the --watch flag. Here is an example repo of the setup: https://github.com/MxNxPx/d2-test

But when trying to view the final product on github (via Chrome), the icons in the diagram do not render:
https://raw.githubusercontent.com/MxNxPx/d2-test/224a8b96b6694d494ba51bc2b32609393a65a7c4/diagram.svg

Any thoughts on what might be the issue?

[alixander]

@MxNxPx yeah Github replaces images with their proxied version (githubusercontent.com), so the local path tries to find it there, and it can't.

3 options:

1. use absolute URLs for images (e.g. https://github.com/MxNxPx/d2-test/blob/main/images/cm.png?raw=true)
2. bundle the images in the svg. (pass in the flag --bundle, which will inline the images)
3. export to PNG (which automatically bundles images)

[MxNxPx]

thanks for the speedy reply @alixander!
so i am bundling the images but i still get that behavior... i don't want to go the png route because then the diagram is no longer interactive (can't click links). does that mean i am only left with option # 1? or perhaps is there a bug with the bundle flag?

fyi, i am using d2 v1.0.4 for this.

[alixander]

@MxNxPx
oh, it's an issue with svgs in Github READMEs.

https://cdn.jsdelivr.net/gh/MxNxPx/d2-test@224a8b96b6694d494ba51bc2b32609393a65a7c4/diagram.svg

See discussion here: isaacs/github#316 and workaround here: isaacs/github#316 (comment)

[MxNxPx]

wow, nice find @alixander - i have updated the README embedded image and link so it loads using that snazzy url.

thanks!

[alixander]

🙌

[MxNxPx]

@alixander - fyi - i found another alternative approach (although also a bit of a hack) which doesn't need that outside cdn. you can create an html file that pulls in the svg as an iframe and can use the github html preview trick to load the page:

html page with iframe

<iframe id="customer" scrolling="no" style="border-style: none; border-color: inherit; border-width: 0px; height:2500px; width:100%;" src="https://raw.githubusercontent.com/MxNxPx/d2-test/main/diagram.svg?sanitize=true"></iframe>

readme link

[![Diagram View](./diagram.svg)](https://htmlpreview.github.io/?https://github.com/MxNxPx/d2-test/blob/main/diagram-view.html "Redirect to diagram")

[alixander]

@MxNxPx https://htmlpreview.github.io is also an outisde entity though. probably far less reliable than jsdelivr. jsdelivr feels almost like critical infra now, they're rock solid https://status.jsdelivr.com/?start=20220101&end=20221231