search

terrastruct / d2

D2 is a modern diagram scripting language that turns text to diagrams.
https://d2lang.com
Mozilla Public License 2.0
16.63k stars 417 forks source link

Icon is not visible in readme.MD #1983

Closed alakdam07 closed 4 weeks ago

alakdam07 commented 3 months ago

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:

![Architecture](./infra/security-infra.svg)

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:

enter image description here

In readme.MD it looks like this:

enter image description here

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:

enter image description here

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!

bo-ku-ra commented 3 months ago

i think it is difficult because 'D2 Playground' does not have a bundle option. https://d2lang.com/tour/man

alakdam07 commented 3 months ago

@bo-ku-ra I found a way to do that. I have taken svg diagram's screen video then converted it into gif.

lovette commented 1 month ago

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.

alixander commented 4 weeks ago

it's bundled now