`render-svg-call-graph`: issues in correctly rendering the SVG

[NGC-4151]

I'm testing rev.ng's SVG rendering capabilities with the following commands (on the latest Docker build of the develop branch, version 97f20b7):

revng2 quick artifact render-svg-call-graph app.x86.elf -o x86-callgraph.svg
revng2 quick artifact render-svg-cfg app.x86.elf -o x86-cfg.svg

Both generated SVGs seem to suffer from a few issues that prevent them from being rendered properly:

1. Top-level tags/comments/whatever are preventing the files from being opened. The callgraph begins with something like /binary: <svg width="2565.199951" xmlns=..., causing Chromium-based apps (including VS Code) to fail to open the file; here's an example error message:

This page contains the following errors:
error on line 1 at column 1: Start tag expected, '<' not found

You can fix this by removing the text or using proper XML comment syntax.

2. A typo prevents nodes from being distributed correctly on the screen. viewbox should be viewBox.
3. The file is missing CSS and/or other styling information, leaving edges invisible and nodes solid black. Node labels are also invisible, but I'm not sure if that's an artifact of the lack of styling or the XML structure.

Thanks for your work on the project! Let me know if there's any other information I can provide.

[mrjackv]

1. This is completely expected, the output of the revng2 quick artifact command is always either a YAML (default) or tar (with the --tar option). This is because all outputs are mappings between some element and the data. I guess the most obvious example is render-svg-call-graph-slice, which prints the (SVG) call-graph filtered by function:

   # revng2 quick artifact render-svg-call-graph-slice
   /function/0x401000:Code_x86_64: <svg ...
   /function/0x401010:Code_x86_64: <svg ...
   /function/0x401026:Code_x86_64: <svg ...
   

   Each element of the YAML is the SVG of the respective function in the binary. For render-svg-call-graph there is only one element, /binary.
   To "extract" the raw SVG you can leverage tools like yq e.g. ... | yq -r '.["/binary"]' or use the --tar format and ... | tar -x --to-stdout /binary

2. Thanks for spotting this bug, a fix will be merged soon

3. This is done intentionally, this allows the SVG to be styled by downstream consumers (e.g. our UI)

[aleclearmind]

1. Basically, works as intended.
2. Fix merged in 0bd7793.
3. I think we need more information about your use case. As of now, these are supposed to be shown in a browser (we embed HTML via foreingObject).
   Are you aware that you can build your own (non laid out) graph easily starting from the emit-cfg artifact?
   Would you maybe prefer to have a GraphViz artifact, possibly using our lay out algorithm?

[aleclearmind]

Closing due to the user not providing more detailed information on his/her use case.