Icons in SVG

[rsegretain]

When the output format is set to SVG, the icons images are not embedded in the SVG file, only referenced. Thus, the SVG file can't be used on another computer.

I saw that it is possible to embed image in SVG file, could that be done in KubeDiagrams ?

[philippemerle]

@rsegretain Thank you for reporting this issue (that I met too). KubeDiagrams uses the dot tool to generate SVG files. But it seems that dot could not generate SVG files embedding images:-( The only solution I found currently is to post-process generated SVG files to embed referenced images. ChatGPT provided me a Python script that should do the post-processing job. I need to test this script and embed it in KubeDiagrams seamlessly. But this will produce big SVG files because for instance the same image for Deployment resources will be embedded for each deployment object. This icon is already present on the web (in the Diagrams github repo), so perhaps it could be more efficient to not embed the Deployment icon but to refer to the url where this icon could be downloaded. Any other thougths?

[rsegretain]

Yes I used post-processing too (with inkscape) to embed the image.
Maybe the icons themselves could have a SVG version used if the output format is SVG ?

[philippemerle]

In a first time, I will embed or link images in SVG files. In a second time, I will search SVG files for all the used icons.

[philippemerle]

@rsegretain now KubeDiagrams generates both svg and dot_json files with urls instead of absolute paths. Then icons are referenced or embedded and both svg and dot_json files could be used on another computer. Could you check if this works for you?

[rsegretain]

Hi,
I properly got the URLs instead of local path, except for one in the dot_json case for the ns.png image (partial output below).
I don't have case to test the embedding part.

{ "name": "%3", "directed": true, "strict": false, "fontcolor": "#2D3436", "fontname": "Sans-Serif", "fontsize": "15", "label": "", "nodesep": "0.60", "pad": "2.0", "rankdir": "TB", "ranksep": "0.75", "splines": "ortho", "_subgraph_cnt": 12, "objects": [ { "name": "cluster_Namespace: default", "bgcolor": "white", "fontcolor": "#2D3436", "fontname": "Sans-Serif", "fontsize": "12", "label": "<table border=\"0\" width=\"100%\"><tr><td fixedsize=\"true\" width=\"64\" height=\"64\"><img src=\"<LOCAL PATH>\/kubediagrams\/myenv\/lib\/python3.13\/site-packages\/resources\/k8s\/group\/ns.png\" \/><\/td><\/tr><tr><td>default<\/td><\/tr><\/table>", "labeljust": "l", "nodesep": "0.60", "pad": "2.0", "pencolor": "black", "rankdir": "LR", "ranksep": "0.75", "shape": "box", "splines": "ortho", "style": "rounded,dashed", "tooltip": "Namespace: default", "_gvid": 0, "subgraphs": [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ], "nodes": [ 12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44 ], "edges": [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21 ] }, ...
with this manifest : https://raw.githubusercontent.com/GoogleCloudPlatform/microservices-demo/refs/heads/main/release/kubernetes-manifests.yaml

[rsegretain]

I run into a side-problem using the SVG with URLs in two documents rendering environments (overleaf and marp), but I guess others may have the same problem : they won't load external contents.

Example on overleaf :

[philippemerle]

@rsegretain now filenames in HTML img tags should be post-processed correctly, could you check this?
For oveleaf and mapr, a possible solution is to generate a pdf and include it in the paper. The quality should be good.
Another way is to always embed images in svg files but we will always lose on svg files' size. A last option is to add a flag to KubeDiagrams to disable generation of urls and always embed images. Any thoughts?

[rsegretain]

It works, no more local path in the dot_json.

Yes, pdf or embedding is what I did to circumvent the problem. It was just to point the limits of the URLs solution.

An option to choose to embed the image when required could be nice, with a message in the doc/help to inform about the larger image size when using it.

To limit the size, is it possible in SVG to embed an image only once and refer to it multiple time ? As icons tend to be present several times.