embbed svg export empty

[alanlivio]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce

1. create file below
2. run mmdc to create svg file
3. svg generated does not embbed the svg

flowchart LR
    User([UserX])
    subgraph AWS ["AWS Cloud"]
        direction LR
        Agent@{ img: "https://icon.icepanel.io/AWS/svg/Management-Governance/Chatbot.svg", label: "Bedrock Agent",  w: 100, h: 100}
        Lambda@{ img: "https://icon.icepanel.io/AWS/svg/Compute/Lambda.svg", label: "Lambda",  w: 100, h: 100  }
    end

    User -- "ask" --> Agent
    Agent -- "call" --> Lambda

    %% Styling
    classDef cloud fill:#f9f9f9,stroke:#232F3E,stroke-width:2px,stroke-dasharray: 5 5
    class AWS cloud
    
    classDef iconNode fill:#fff,stroke:#ccc,stroke-width:1px
    class Agent,Lambda iconNode

Expected behavior
The output below was generated using https://mermaid.ai/live/edit

Desktop (please complete the following information):

• OS: windows
• Browser chrome
• Version: mmdc --version: 11.14.0

[aloisklink]

Hi @alanlivio, I suspect this is an issue of how you're viewing the SVG.

I made the following SVG using the latest version of mermaid-cli. It doesn't work on GitHub, but if you save it to your computer, then re-open it (so the browser says it's located at file://xxxxx), I can see those images.

You probably need to play around with your browser's/website's security settings, to allow SVGs to download images from https://icon.icepanel.io.

If you want to embed SVGs into your SVG (so your SVG doesn't need to fetch SVGs from the internet when opened), you can use Mermaid's icon pack feature.

Unfortunately, I couldn't find an iconify compatible iconpack that contained the bedrock agent icon, but for the lambda icon, you can use icon: 'logos:aws-lambda' and do:

flowchart LR
    User([UserX])
    subgraph AWS ["AWS Cloud"]
        direction LR
        Agent@{ img: "https://icon.icepanel.io/AWS/svg/Management-Governance/Chatbot.svg", label: "Bedrock Agent",  w: 100, h: 100}
        Lambda@{ icon: "logos:aws-lambda", label: "Lambda",  w: 100, h: 100  }
    end

    User -- "ask" --> Agent
    Agent -- "call" --> Lambda

    %% Styling
    classDef cloud fill:#f9f9f9,stroke:#232F3E,stroke-width:2px,stroke-dasharray: 5 5
    class AWS cloud
    
    classDef iconNode fill:#fff,stroke:#ccc,stroke-width:1px
    class Agent,Lambda iconNode

And run @mermaid-js/mermaid-cli with --iconPacks '@iconify-json/logos', and you'll get: