For everyone who knows and loves PGF/TikZ: Is there something that has a similar powerful expressive high-level “graphic description language” like TikZ for HTML5?

I want to convert high-level textual descriptions of drawings (e.g. TikZ) to web-readable material.

Should have:

  • something like PGF/TikZ’s \node
  • with easy placement relative to each other: \node (bla) [right=of othernode]
  • useful anchors for drawing “connections” between things, bla.north, bla.north_west, bla.360
  • styles
  • powerful coordinate systems, calculations and transformations
  • labels: in the nodes and next to paths
  • and: simple links (click → webpage)

I don’t care about:

  • animation
  • dragging
  • changing shapes
  • or any other interaction/dynamics more than links
  • (not that they would bother me, I just don’t need them)

Probably something like this:

  • Syntax might be JavaScript
  • build on top of HTML5 canvas/SVG
  • but a PGF/TikZ export to PNGs with HTML imagemaps would do it, too. :-)
  • other ideas?

Invalid is:

  • SVG as both: the description language and the output format in one

SVG is simply not a high level human-readable/-edible language. I know that XML’s design goal was to be human-readable. But in practice it is not. – SVG as the output format is fine, but doesn’t answer the question yet.

TikZ-export is not off-topic, so re-open this question!

  • 5
    It’s obviously a cross-topic question. I need to ask people who know both: PGF and the answer to my question (or suggestions). If you don’t belong to these, no need to clutter my question with useless comments. What are the chances that someone with TikZ knowledge has heard of HTML? 100%. And the chances of someone who is professional with websites knows PGF? 0.01%. I even guess that the absolute number of people who know both is higher here then on stackexchange. – Consider this a convert question: How to turn a TikZ picture with hyperlinks into HTML? I’m even willing to rewrite the code. Ok? Commented Dec 19, 2013 at 14:31
  • 5
    @RobertSiemer: For generating HTML/SVG output with TikZ, take a look at section 10.2.4 Producing HTML / SVG Output of the manual.
    – Jake
    Commented Dec 19, 2013 at 14:36
  • 2
    You are approaching the comments from the wrong way. HTML supports SVG graphics elements why would you create a TikZ picture when you have HTML5? You can create your pictures on any wyswyg software, get the output and do your magic on it. Typesetting documents is a different ball game and SVG etc is not straightforward to use where TikZ shines.
    – percusse
    Commented Dec 19, 2013 at 14:41
  • 5
    You can convert your fancy TikZ pictures into svg, e.g. with dvisvgm. It also has basic support for hyperlinks, and every modern browser renders svg.
    – Alex
    Commented Dec 19, 2013 at 14:46
  • 1
    @RobertSiemer It is in texlive-binaries, but the hyperref features were added only recently, so you may want build from source anyway. (It's easy.)
    – Alex
    Commented Dec 19, 2013 at 16:46


Browse other questions tagged .