# Specify SVG element ids when converting pgf/tikz figures to SVG

I have a bunch of tikz figures that I would like to convert to svg for inclusion in a webpage. I can successfully use dvisvgm to convert the figures to svg. I noticed that in the resulting svg, some paths and some groups have id, usually in the form g0-79 etc, but not all elements had an id.

I would like to manipulate the resulting svg on the webpage using javascript, to do things like hide or show elements etc. To do that, the elements would have to have an id.

I am looking for a way to, ideally, specify a svg id for a path or a group in the original tikz figure, so I could write something like:

\begin{tikzfigure}
% some tikz code here
\draw[thick,->,svgid=some_awesome_path] (0,0) - ...
%some more tikz code
\begin{scope}[svgid = some_awesome_group]
%some code that should be in a svg group with the above id
\end{scope}
%some mode tikz code
\end{tikzpicture}


and the generated svg groups and paths would have the given ids.

Edit: I now have a working solution, which you can find in the answers below. However, I would like to see what else can be done: give paths, nodes, decorations, ... their own svg ids, classes, and other attributes...

Translate beamer tags, e.g. <2-> into Reveal.js fragments, ...

I want to see what people can come up with.

• To specify a group with an id, you may try to use the \special command dvisvgm:raw. – Paul Gaborit Apr 21 '14 at 8:45
• Thanks, @Paul, see my answer based on your suggestion. I would still like to have something more integrated with tikz, though. – Jan Hlavacek Apr 21 '14 at 13:26
• Thanks to Paul, I can now mostly do what I wanted to do. However, I would like to see more activity on this, so I am offering a bounty. – Jan Hlavacek Apr 24 '14 at 14:22

With Paul's suggestion, I can do the following, which seems to do what I need at the moment:

Define a new environment svggroup which takes one argument, which is the group id:

\newenvironment{svggroup}[1]
{\special{dvisvgm:raw <g id="#1">}}
{\special{dvisvgm:raw </g>}}


Then I can use it like this:

\begin{tikzpicture}
\draw[thick] (0,0) -- (2,2);
\node[color=blue] at (1,1) {$x^2 - 2x + 1$};
\begin{svggroup}{blah}
\draw[red] (0,0) rectangle (2,2);
\node[color=green] at (1,.2) {$x^2 - 2x + 1$};
\end{svggroup}
\end{tikzpicture}


This will put the red rectangle and green text into its own svg group with id "blah". By setting the "display" attribute of this group from javascript, I can then show or hide it on the webpage.

## TikZ Integration

Definition of the new svgid scope style:

\tikzset{
svgid/.style={
execute at begin scope={\special{dvisvgm:raw <g id="#1">}},
execute at end scope={\special{dvisvgm:raw </g>}},
}
}


Example of usage:

\begin{tikzpicture}
\draw[thick] (0,0) -- (2,2);
\node[color=blue] at (1,1) {$x^2 - 2x + 1$};
\begin{scope}[svgid=blah]
\draw[red] (0,0) rectangle (2,2);
\node[color=green] at (1,.2) {$x^2 - 2x + 1$};
\end{scope}
\end{tikzpicture}