How to use SVG for custom node shapes in graphviz?

Question

I'm trying to use graphviz (the dot command-line tool, to be more specific) to generate a SVG layout of a graph. I would like to use my Inkscape-generated SVG files to define node shapes, and I followed the instructions on the graphviz tutorial. I'm outputting SVG so, in theory, this should be easy to do by declaring the shapes as <symbol>s and <use>ing them in the diagram. This e-mail makes me believe that the functionality was implemented, and I just can't figure out how to use it.

I tried having a node's image attribute pointing to the custom shape SVG file. I also tried setting the node's shape to custom and pointing the shapefile to the shape SVG. dot complains if I put an invalid file name, and its plugin graph suggests that it can read SVG. I'm guessing that either I'm using the wrong attributes, or there's something wrong with the SVG files that I have tried.

For whatever it's worth, I do have viewBox set on the <svg> attribute.

Answer 1

graphviz only supports SVG input where the width and height attributes are set on <svg> using absolute units (pixels, inches etc.). Inkscape outputs height="100%" width="100%" viewBox="0 0 width_in_pixels height_in_pixels" as attributes on the <svg> element.

I filed a bug report, and a graphviz developer pointed me to the help for the image attribute, which describes the requirements for using SVG in custom node shapes.

Answer 2

I had the same issue, but this post in SO helped me:

graphviz: Nodes of SVG images do not get inserted if output is SVG

It seems graphviz imports only .svg with the below XML header:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

And also the width/height of the SVG together with the viewbox defined, example:

<svg width="100" height="100" viewBox="0 0 100 100">