svg output is broken

[tombohub]

windows 10 graphviz 11.0.0 diagrams 0.23.4 python 3.12.2

code:

from diagrams import Cluster, Diagram
from diagrams.aws.compute import ECS
from diagrams.aws.database import RDS
from diagrams.aws.network import Route53

with Diagram("Simple Web Service with DB Cluster", show=False, outformat='svg'):
    dns = Route53("dns")
    web = ECS("service")

    with Cluster("DB Cluster"):
        db_primary = RDS("primary")
        db_primary - [RDS("replica1"),
                     RDS("replica2")]

    dns >> web >> db_primary

produces svg looking like this:

[filipeaaoliveira]

Hi @tombohub

I just tested this code locally and everything worked. Does PNG output work on this diagram and you only have problems with svg, or is that having issues as well?

[tombohub]

@filipeaaoliveira png works normal:

What could it be? Where should I look?

[filipeaaoliveira]

I cannot test this as I have no Windows machine, but can you test a different Graphviz version @tombohub ?

[melanopsis]

I see the same behavior on Linux.

diagrams: 0.23.4 graphviz: 12.1.2

[sieldev]

Where are you reading the svg file ? Is it on same system where you generated or another machine ?

Because svg file embeds local system path where the diagram has been generated as you can see in attribute xlink:href:

<image xlink:href="C:\Users\xxxx\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.12_qbz5n2kfra8p0\LocalCache\local-packages\Python312\site-packages\resources/aws/network\elastic-load-balancing.png" width="100.8px" height="100.8px" preserveAspectRatio="xMinYMin meet" x="-2.84217e-14" y="-146.3"/>

In case you try to host your svg in a website or any other machine it will fail. So, you will have followings choices:

• Generate your diagram as png file (in linux system you might need to have an extra package to save as png: graphviz-gd)
• Host all the icons resources in your website and change each xlink:href attribute to put website's paths. But this is very cumbersome
• Convert each images as base64 to embed it in your svg. @dpar39 already did it in this issue. However, there is a mistake in code that will generate a broken image again.

  mime_type = mimetypes.guess_type(resource_file)

  Need to be replaced by:

  mime_type = [mime for mime in mimetypes.guess_type(resource_file) if mime != None])

  It will remove None entry and only image/png will be added to data attribute