[feature request] id and class attributes for nodes and paths

[severin-lemaignan]

I'm including the dvisvgm svg output in an html page, and I would like to be able to refer to some specific elements to eg restyle them or animate them via javascript.

To this end, it would be extremely useful if dvisvgm could add a id attribute to the named tikz nodes & paths, algonside some class information (for instance, node, the shape -- circle, etc).

For instance,

\documentclass[tikz,dvisvgm]{standalone}

\begin{document}

\begin{tikzpicture}
    \node[draw] (node1) at (0,0) {Hello world};
    \node[draw, shape=circle] (node2) at (1,1) {Hello world 2};
    \path (node1) edge[->,name=edge1] (node2);
\end{tikzpicture}
\end{document}

would generate something like:

<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1'>
<g id='page1'>
  <g id='node1' class='node'>
    <text class='f0' >...</text>
  </g>
  <path id='edge1' class='edge' d='M-4.06023 21.59477H60.96571V35.31071H-4.06023Z' fill='none'/>
  <g id='node2' class='node circle'>
    <text class='f0'>...</text>
  </g>
</g>
</svg>

I understand that the tikz names are not visible to the drivers (at least, they do not seem to appear in the output dvi file). So it might require some tricks somewhere in the pipeline?

[severin-lemaignan]

A possible workaround if of course to manually wrap the nodes and paths in dvisvgm:raw specials:

\documentclass[tikz,dvisvgm]{standalone}

\newcommand{\svgid}[1]{\special{dvisvgm:raw <g id='#1'>}}
\newcommand{\svgidend}{\special{dvisvgm:raw </g>}}

\begin{document}

\begin{tikzpicture}
    \svgid{node1}
      \node[draw] (node1) at (0,0) {Hello world};
    \svgidend
    
    \svgid{node2}
      \node[draw] (node2) at (1,1) {Hello world 2};
    \svgidend

    \svgid{edge1}
      \path (node1) edge[->] (node2);
    \svgidend
\end{tikzpicture}
\end{document}

This works as expected, but not great usability...

[mgieseki]

The DVI file doesn't contain any information about the origins of the embedded SVG or PS fragments. Therefore, it's not possible to find out which parts were created by TikZ and which macros/commands were used in the .tex file. The only way is to add further information to the DVI file, e.g. using dvisvgm:raw.
I'd suggest to ask the TikZ developers to add an optional property to the statements that allow the users to specify IDs there. Since their dvisvgm back-end directly embeds SVG code into the DVI file, they could add the ID too.

[severin-lemaignan]

thanks a lot for the quick feedback! I've opened an issue here: pgf-tikz/pgf#1344