SVG Image Map

We can now embed interactive SVGs in wiki.

# jQuery Graphviz

This is a nice simple javascript package that let's us interact with svg's - github

Take a look at pretty-wiki to see how we might want to use such a map in the background - pretty_wiki.html

# Things we can do

SVG has a number of advantages - unige.ch * it scales for responsive design * fits in with general graphic tool chains * takes up minimal file size for complex maps

On the other hand testing has shown it is not as fast for large graphs as canvas based solutions such as cytoscape.

Canvas can provide improved rendering performance and scalability: often 2-10x faster than SVG for full-component redraws (though such comparisons require nuance).

While you can use a reference to an svg file with the element:

Nice green circle

Emdedding svg markup directly in html, or using the object element does not work unfortunately.

We can also drag and drop svg files onto the image tag. However Svg Links do not work.

This embedded svg file contains an xlink:href element. Unfortunately the link does not work - w3.org

This interactive examples for instance works in plain html but not Fedwiki - file

That prevent complex interactive maps (like below) being made using single robust standardised svg files:

The HTML Sanitization that the About HTML Plugin performs removes the markup required to provide Internal Fedwiki Links.

# See also