Inlining TikZ blocks as SVG in HTML export

Inlining TikZ blocks as SVG in HTML export

[Christophe Garion]

Hello,

I would like to be able to export Org files containing TikZ pictures to
HTML files with SVG pictures corresponding to TikZ pictures inlined
directly in the HTML files. My use case is to produce quizz questions
with graph drawings for the Moodle LMS (https://moodle.org/) used at our
university. It is really painful to upload picture files to Moodle and link
them to text and Moodle accepts plain HTML5 for text description, so it
seems to be a rather food solution.

Of course, I can use LaTeX source blocks to generate a SVG file like

#+begin_src latex :results none :exports results :file "tree.svg"
  \usetikzlibrary{trees}
  \begin{tikzpicture}
    \node [circle, draw, fill=red!20] at (0,0) {1}
    child { node [circle, draw, fill=blue!30] {2}
      child { node [circle, draw, fill=green!30] {3} }
      child { node [circle, draw, fill=yellow!30] {4} }};
  \end{tikzpicture}
#+end_src

but I must confessed that I am a bit lost with code blocks parameters
and that I have not found how to properly inline SVG in HTML export.

Sorry if the answer can be easily found on the web and thanks in
advance,

Christophe

--
Christophe Garion
GPG: 1982 15B2 64AC 3C34 532D  BF19 6CD6 246C 62DA 5A7F

Re: Inlining TikZ blocks as SVG in HTML export

[Alan Schmitt]

[-- Attachment #1: Type: text/plain, Size: 2619 bytes --]

On 2019-01-09 22:46, Christophe Garion <tofgarion@runbox.com> 
writes:

> Hello,
>
> I would like to be able to export Org files containing TikZ 
> pictures to
> HTML files with SVG pictures corresponding to TikZ pictures 
> inlined
> directly in the HTML files. My use case is to produce quizz 
> questions
> with graph drawings for the Moodle LMS (https://moodle.org/) 
> used at our
> university. It is really painful to upload picture files to 
> Moodle and link
> them to text and Moodle accepts plain HTML5 for text 
> description, so it
> seems to be a rather food solution.

Here is an example of how I do it. The by-backend is defined as 
follows:

;; to export to both latex and html
(defmacro by-backend (&rest body)
  `(cl-case org-export-current-backend ,@body))

   #+header: :file (by-backend (latex "sigma3.tikz") (t 
   "sigma3.png"))
   #+header: :imagemagick yes :iminoptions -density 600 
   :imoutoptions -geometry 800
   #+header: :results raw graphics
   #+header: :fit yes
   #+header: :packages '(("" "tikz"))
   #+begin_src latex
   \usetikzlibrary{matrix,arrows}
   \begin{tikzpicture}
  \matrix (m) [matrix of nodes, row sep=1em, column sep=4em]
  { iterate & map & reduce \\
    & & $acci$  \\
    $a_{0} = a$           & $f(a_{0})$ & \\ & &  $acc_{0} = fc\; 
    (f\; a_{0})\; acci$ \\
    $a_1 = a_0+i$          & $f(a_{1})$  &\\ & & $acc_{1} = fc\; 
    (f\; a_{1})\; acc_{0}$ \\
    $\ldots$             & $\ldots$   &\\ & & ~ \\
    $a_{n-1} = a_{n-2} + i$ & $f(a_{n-1})$ &\\ & & $acc_{n-1} = 
    fc\; (f \; a_{n-1})\; acc_{n-2}$  \\
    $a_n = a_{n-1} + i$ & $f(a_{n})$         &\\
    $a_{n+1} = a_n + i > b$& & $res = fc\; (f\; a_{n})\; 
    acc_{n-1}$  \\
  };
   \draw (m-3-1) edge[->,thick] node[auto]{\scriptsize $f$} 
   (m-3-2);
   \draw (m-5-1) edge[->,thick] node[auto]{\scriptsize $f$} 
   (m-5-2);
   \draw (m-9-1) edge[->,thick] node[auto]{\scriptsize $f$} 
   (m-9-2);
   \draw (m-11-1) edge[->,thick] node[auto]{\scriptsize $f$} 
   (m-11-2);

   \draw (m-6-3) edge[dotted] (m-8-3);

   \draw[in=90,out=0] (m-3-2) edge[thick] (m-4-3.north);
   \draw (m-2-3) edge[->,thick] node[right]{\scriptsize $fc$} 
   (m-4-3);

   \draw[in=90,out=0] (m-5-2) edge[thick] (m-6-3.north);
   \draw (m-4-3) edge[->,thick] node[right]{\scriptsize $fc$} 
   (m-6-3);

   \draw[in=90,out=0] (m-9-2) edge[thick] (m-10-3.north);
   \draw (m-8-3) edge[->,thick] node[right]{\scriptsize $fc$} 
   (m-10-3);

   \draw[in=90,out=0] (m-11-2) edge[thick] (m-12-3.north);
   \draw (m-10-3) edge[->,thick] node[right]{\scriptsize $fc$} 
   (m-12-3);
   \end{tikzpicture}
   #+end_src

Best,

Alan

[-- Attachment #2: signature.asc --]
[-- Type: application/pgp-signature, Size: 487 bytes --]