How to show Tikz figures on the webpage (html）

Author posted @ 2014年6月17日 19:40 in LaTeX with tags latex html5 , 2665 阅读

Consider the fact that I have used Tikz (Tex) to finished drawing some nice graphs. In another words, I have some source files in .tex format. The question is, how do I show these diagrams drawn using Tikz on the html file?

The tex source code for above figure is below, save it as the file fig.tex

\documentclass{article}
\def\pgfsysdriver{pgfsys-tex4ht.def}
%There is specialized output driver for use with tex4ht in Tikz. Using it, diagrams are saved in SVG.
\usepackage{tikz}
\usepackage{pgf}
\usetikzlibrary{automata}
\usetikzlibrary{positioning,chains,fit,shapes,calc}
\begin{document}
\begin{tikzpicture}[->,>=stealth',shorten >=5pt,auto,node distance=1cm]
\tikzstyle{every state}=[fill=purple, draw=none, text=white]
\node[state, scale=0.6] (A) at (0,0) {$0$};
\node[state, scale=0.6, fill=violet] (B) at (3,0) {$1$};
\path (A) edge [bend left=10] node {\scriptsize{Tr(0, 40)}} (B)
(A) edge [bend left=45] node {\scriptsize{Tr(-35,-20)}} (B)
(A) edge [bend left=90] node {\scriptsize{Tr(35,-20)}} (B)
(B) edge [bend left=10] node {\scriptsize{Tr(-40,0)}} (A)
(B) edge [bend left=45] node {\scriptsize{Tr(35,20)}} (A)
(B) edge [bend left=90] node {\scriptsize{Tr(-35,20)}} (A);
\end{tikzpicture}
\end{document}


htlatex fig.tex

to compile the source tex file. Then I got a fig.html, fig.css and fig-1.svg file in current folder. So I can read the source of the fig.html file and cut the useful chunck of codes for me to insert to my target html file.

<meta name="generator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)">
<meta name="originator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)">
<!-- html -->
<meta name="src" content="fig.tex">

<body>

<object data="fig-1.svg" width="134" height="124" type="image/svg+xml"></object>

References:

h2cker 说:
2014年6月23日 09:54

Brianna Wild 说:
2018年5月08日 01:04

<!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}--> The study of the topic of the webpage and its has even carved out for the success of the people the web and html subject has been shared for the actual movement of the case study <!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}--> essay writing services review in the urge of the projects units for the students.

(输入验证码)
or Ctrl+Enter