terrastruct
Icon is not visible in readme.MD
I have downloaded this diagram as SVG.
I am trying to include an SVG icon in my Git README.md file, but despite having the correct relative path and confirming that the SVG displays correctly in local browsers, it does not render in the README.md file on Git. Here's how I've tried to include it:
I have verified that the path ./architecture/security-infra.svg is correct relative to the location of the README.md file in my GitLab repository.
In my browser it looks like this:
In readme.MD it looks like this:
Despite these efforts, the SVG icon still does not render in the GitLab README.md file. What could be causing this issue, and how can I resolve it?
Even it works in mozilla playgroud:
I suspect this image href does not load the svg:
<image href="https://icons.terrastruct.com/aws%2FApplication%20Integration%2FAmazon-EventBridge.svg" x="0.000000" y="250.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="64.000000" y="399.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">CentralizedSecurity</text></g><g id="SharedServiceEventBus"><g class="shape" ><image href="https://icons.terrastruct.com/aws%2FApplication%20Integration%2FAmazon-EventBridge.svg" x="228.000000" y="250.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="292.000000" y="399.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">SharedServiceEventBus</text></g><g id="MemberAccountEventRule"><g class="shape" ><image href="https://icons.terrastruct.com/aws%2FApplication%20Integration%2FAmazon-EventBridge_Custom-event-bus_resource-icon_light-bg.svg" x="456.000000" y="250.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="520.000000" y="399.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">MemberAccountEventRule</text></g><g id="LambdaStoreDynamo"><g class="shape" ><image href="https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg" x="684.000000" y="250.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="748.000000" y="399.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">LambdaStoreDynamo</text></g><g id="LambdaPublishToSES"><g class="shape" ><image href="https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg" x="1140.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="1204.000000" y="149.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">LambdaPublishToSES</text></g><g id="PublishToSlack"><g class="shape" ><image href="https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg" x="1140.000000" y="344.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="1204.000000" y="493.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">PublishToSlack</text></g><g id="DynamoDB"><g class="shape" ><image href="https://icons.terrastruct.com/aws%2FDatabase%2FAmazon-DynamoDB.svg" x="912.000000" y="250.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="976.000000" y="399.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">DynamoDB</text></g><g id="SES"><g class="shape" ><image href="https://icons.terrastruct.com/aws%2FCustomer%20Engagement%2FAmazon-Simple-Email-Service-SES.svg" x="1368.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="1432.000000" y="149.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">SES</text></g><g id="PlatformTeamSlack"><g class="shape" ><image href="https://icons.terrastruct.com/dev%2Fslack.svg"
Any help or insights would be greatly appreciated.
Thank you!
i think it is difficult because 'D2 Playground' does not have a bundle option. https://d2lang.com/tour/man
@bo-ku-ra I found a way to do that. I have taken svg diagram's screen video then converted it into gif.
Try replacing the image reference to an <object> tag, that's what worked for me in https://github.com/terrastruct/d2/issues/1985#issuecomment-2315155112.
