Linking to SVG templates in external files

Question

I'm using the yFiles for HTML chart library, which supports rendering nodes using SVG templates. According to the documentation, this is done by embedding a special <script> tag in the main HTML file with somewhat SVG elements in it (without the enclosing <svg> container).

<script type="text/yfiles-template">
<g id="expand_icon" transform="translate(21 6)">
   <polygon stroke="#FFFFFF" stroke-width="3" fill="none"
     points="6,17 6,12 1,12 1,6 6,6 6,1 12,1 12,6 17,6 17,12 12,12 12,17"/>
</g>
</script>

The problem is that putting all my templates in the main HTML file is messy, and I would rather split them into several external SVG files. However, if I simply copy the <script>'s contents into an external file and try changing the script tag like this:

<script type="text/yfiles-template" src="images/nodeTemplates.svg"></script>

doesn't seem to work. No error is displayed, but my templates aren't shown.

I can't find anything else in the docs about it, and it's entirely possible that it's hardcoded to look for it in the main HTML, but I was wondering if anyone managed to get it to read the templates from an external file.

Answer 1

The node has and image property you can use for a valid .svg file aka:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

The above will give you the ability to put each svg in a different .svg file.

Answer 2

I suggest you use the StringTemplateNodeStyle where you just pass the svg snippet as a string to the style. You can then use your own loading mechanism to retrieve the snippets.

Note that if you don't need all the data binding features of the TemplateNodeStyle, but just want to dynamically include an svg file as an image, you can just as well use the ImageNodeStyle and point it directly to your SVG resource. Alternatively implementing your own style as shown in the custom style tutorial is also a very feasible and flexible solution.