Extending SVG to Include Tooltips and Anchor Tags?

[davesides3]

I've been enjoying using nomnoml.com. Thanks for creating it!

At best I hack a little at JavaScript, so I'm not up for implementing the enhancements raised here within nomnoml TypeScript myself, but I have created a process around the nomnoml file to embed additional information in the SVG format to support tooltips (via <title>) and anchor tags. I'm wondering if you've ever considered extending the nomnoml syntax for this? I do have concerns that it would clutter up the syntax too much, but thought I would raise it for discussion.

I think you should be able to access a simple SVG sample at this link: https://svgsample.cds3.repl.co/extended.svg

As far as syntax, it may only be squiggly brackets that are available at this point. Something like:

[nodename {This is a tooltip...}]

But then what do you do for an anchor tag? Using { } to embed html seems too ugly:

[nodename {<title>This is a tooltip...</title>}]

Any interest or thoughts on how to enable the use of these extended SVG capabilities within nomnoml?

Thanks for the tip on using npx nomnoml. That has been a big help with generating an SVG from a revised nomnoml script.

[skanaar]

Thank you 😊

Good news: Interactive SVG is possible!

#121

There is not direct support for anchor <a/> tags however, instead you can host your clickable SVG:s in a homepage that registers an onclick listener. This event listener can then do anything.

It is not possible to add meta data to nodes right now, so you would have to store a list of urls connected to node names in some other place.

From the Readme
In the SVG output the node name is attached to SVG shapes and <g> containers with data-name attribute. You can use this to implement interactive diagrams.

document.querySelector('svg').onclick = function (e) {
  console.log(e.target.closest('g[data-name]')?.attributes['data-name'])
}

[davesides3]

Thanks for the quick response.

Yes, I went with a JavaScript approach, but circled back to trying a static file since JavaScript execution is rejected in certain environments (by default, at least - e.g. Sharepoint). Of course, I've also seen where <a/> and even <title/> functionality is disabled within an SVG. A one file solution for distribution would be handy. I've even thought of PDF, but wanted to stay web-centric. This is beyond scope for nomnoml and I appreciate the flexibility that data-name offers (and use it for parsing too). Maybe I'll focus some effort on the distribution environment options and go back to JavaScript.

[BertLevrau]

If this should work out of the box, this should be great!!!