Adding SVG support to TFO-Graphviz

A TFO-Graphviz plugin user recently posted some issues he was having with the plugin. One of his requests was to add the SVG output format which I had hitherto omitted because of the previous lack of browser support. Time has passed, it is time to fix that omission.

For maximum effect this also meant the introduction of the width and height attributes. This an example of the SVG output scaled to 100% of the width of its container on the page:

And here’s the same graph again, but with the width constrained to a specific pixel count:

And here’s one of my previous Graphs as an SVG:

TFO Graphviz Demo

The image map works great with the SVG format, but unfortunately if the browser scales the image at all (such as in a responsive design) it doesn’t seem to scale the image map with it. It seems the current best option is to include some JavaScript whenever have both an image map and use of the height or width attributes. I’m not keen on this but see no other alternative at the moment.

TFO Graphviz Demo

And the DOT for that is:

The other small enhancement added is slightly better error output. This currently only works if you call the Graphviz program; it doesn’t work for PHP bindings. But a typo in the above DOT would produce this output (noting the style will vary with whatever theme and plugins you have):

Error generating Graphviz image

This will be version 1.13.

1 thought on “Adding SVG support to TFO-Graphviz

  1. Pingback: Chris Luke on "[Plugin: TFO Graphviz] Doesn't work, no idea why" * Best Wordpress Themes - Reviews

Comments are closed.