0

Premise

I don't know if this was already asked but I searched for it and only found something relevant but nothing that solved my problem. Probably the most related question is How to create non-outlined SVG files from LaTeX formulae?

What I'm aiming for

I want to produce same content in LaTeX and then include it in my static website. The content should be a standalone tikzpicture with some text in it. The text could be plain text or math text. The text should be rendered accordly to the text in the web page (font family, size and so on).

My idea

I would like to use svg images because they are vectorial and support text tag. In this case the plain text should be rendered normally based on the CSS while the math should be saved as LaTeX unprocessed commands in the svg and then pre-processed through KaTeX. Let's handle the simple case first: the plain text. I tried to compile something like this test.tex file

\documentclass{standalone}
\usepackage{tikz}
\begin{document}
\begin{tikzpicture}
...
\end{tikzpicture}
\end{document}

with pdflatex test.tex and convert it with pdf2svg test.pdf test.svg but I didn't obtained any text tag (the text was rendered as vectorial). The same happened compiling it with latex test.tex and converting it with dvisvgm -n test.dvi.

So the question is: how could I export an svg image with text inside?

Edit: complete example with dvisvgm

This is my test.tex

\documentclass{standalone}
\usepackage{tikz}
\begin{document}
\def\layersep{2.5cm}
\begin{tikzpicture}[shorten >=1pt,->,draw=black!50, node distance=\layersep]
  \tikzstyle{every pin edge}=[<-,shorten <=1pt]
  \tikzstyle{neuron}=[circle,fill=black!25,minimum size=17pt,inner sep=0pt]
  %\tikzstyle{input neuron}=[neuron, fill=green!50];
  \tikzstyle{input}=[neuron, fill=green!50];
  \tikzstyle{output neuron}=[neuron, fill=red!50];
  \tikzstyle{hidden neuron}=[neuron, fill=blue!50];
  \tikzstyle{annot} = [text width=4em, text centered]

  % Draw the input layer nodes
  \node[input] (L0-1) at (0,-1) {$x_1$};
  \node[input] (L0-2) at (0,-2) {$x_2$};
  \node[input] (L0-3) at (0,-3) {$x_n$};

  % Draw the output layer node
  \node[output neuron] (L1-1) at (\layersep, -2) {$\hat{y}$};

  % Connect every node in the input layer with the output layer
  \foreach \source in {1,...,3}
    \path (L0-\source) edge (L1-1);

  % Annotate the layers
  \node[annot,above of=L0-1, node distance=1cm] (il) {layer 0};
  \node[annot,right of=il] {layer 1};
\end{tikzpicture}
% End of code
\end{document}

Then I run:

latex test.tex
dvisvgm -n test.dvi

and this is my test.svg:

<?xml version='1.0' encoding='UTF-8'?>
<!-- This file was generated by dvisvgm 2.1.3 -->
<svg height='97.9372pt' version='1.1' viewBox='-59.976 -68.6794 99.9521 97.9372' width='99.9521pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<path d='M3.32752 -3.00872C3.3873 -3.26775 3.61644 -4.18431 4.31382 -4.18431C4.36364 -4.18431 4.60274 -4.18431 4.81196 -4.05479C4.533 -4.00498 4.33375 -3.75592 4.33375 -3.51681C4.33375 -3.35741 4.44334 -3.16812 4.71233 -3.16812C4.93151 -3.16812 5.25031 -3.34745 5.25031 -3.74595C5.25031 -4.26401 4.66252 -4.40349 4.32379 -4.40349C3.74595 -4.40349 3.39726 -3.87547 3.27771 -3.64633C3.02864 -4.30386 2.49066 -4.40349 2.20174 -4.40349C1.16563 -4.40349 0.597758 -3.11831 0.597758 -2.86924C0.597758 -2.76961 0.697385 -2.76961 0.71731 -2.76961C0.797011 -2.76961 0.826899 -2.78954 0.846824 -2.8792C1.18555 -3.93524 1.84309 -4.18431 2.18182 -4.18431C2.37111 -4.18431 2.7198 -4.09465 2.7198 -3.51681C2.7198 -3.20797 2.55044 -2.54047 2.18182 -1.1457C2.02242 -0.52802 1.67372 -0.109589 1.23537 -0.109589C1.17559 -0.109589 0.946451 -0.109589 0.737235 -0.239103C0.986301 -0.288917 1.20548 -0.498132 1.20548 -0.777086C1.20548 -1.04608 0.986301 -1.12578 0.836862 -1.12578C0.537983 -1.12578 0.288917 -0.86675 0.288917 -0.547945C0.288917 -0.0896638 0.787049 0.109589 1.2254 0.109589C1.88294 0.109589 2.24159 -0.587796 2.27148 -0.647572C2.39103 -0.278954 2.74969 0.109589 3.34745 0.109589C4.3736 0.109589 4.94147 -1.17559 4.94147 -1.42466C4.94147 -1.52428 4.85181 -1.52428 4.82192 -1.52428C4.73225 -1.52428 4.71233 -1.48443 4.6924 -1.41469C4.36364 -0.348692 3.68618 -0.109589 3.36737 -0.109589C2.97883 -0.109589 2.81943 -0.428394 2.81943 -0.767123C2.81943 -0.986301 2.8792 -1.20548 2.98879 -1.64384L3.32752 -3.00872Z' id='g0-120'/>
<path d='M4.84184 -3.79577C4.88169 -3.93524 4.88169 -3.95517 4.88169 -4.02491C4.88169 -4.20423 4.74222 -4.2939 4.59278 -4.2939C4.49315 -4.2939 4.33375 -4.23412 4.24408 -4.08468C4.22416 -4.03487 4.14446 -3.72603 4.10461 -3.5467C4.03487 -3.28767 3.96513 -3.01868 3.90535 -2.74969L3.45704 -0.956413C3.41719 -0.806974 2.98879 -0.109589 2.33126 -0.109589C1.82316 -0.109589 1.71357 -0.547945 1.71357 -0.916563C1.71357 -1.37484 1.88294 -1.99253 2.22167 -2.86924C2.38107 -3.27771 2.42092 -3.3873 2.42092 -3.58655C2.42092 -4.03487 2.10212 -4.40349 1.60399 -4.40349C0.657534 -4.40349 0.288917 -2.9589 0.288917 -2.86924C0.288917 -2.76961 0.388543 -2.76961 0.408468 -2.76961C0.508095 -2.76961 0.518057 -2.78954 0.56787 -2.94894C0.836862 -3.88543 1.23537 -4.18431 1.5741 -4.18431C1.6538 -4.18431 1.82316 -4.18431 1.82316 -3.8655C1.82316 -3.61644 1.72354 -3.35741 1.6538 -3.16812C1.25529 -2.11208 1.07597 -1.54421 1.07597 -1.07597C1.07597 -0.18929 1.70361 0.109589 2.29141 0.109589C2.67995 0.109589 3.01868 -0.0597758 3.29763 -0.33873C3.16812 0.179328 3.04857 0.667497 2.65006 1.19552C2.39103 1.53425 2.01245 1.82316 1.55417 1.82316C1.41469 1.82316 0.966376 1.79328 0.797011 1.40473C0.956413 1.40473 1.08593 1.40473 1.2254 1.28518C1.32503 1.19552 1.42466 1.066 1.42466 0.876712C1.42466 0.56787 1.15567 0.52802 1.05604 0.52802C0.826899 0.52802 0.498132 0.687422 0.498132 1.17559C0.498132 1.67372 0.936488 2.04234 1.55417 2.04234C2.58032 2.04234 3.60648 1.13574 3.88543 0.00996264L4.84184 -3.79577Z' id='g0-121'/>
<path d='M4.58281 -3.18804C4.58281 -3.98506 4.533 -4.78207 4.18431 -5.5193C3.72603 -6.47572 2.90909 -6.63512 2.49066 -6.63512C1.8929 -6.63512 1.16563 -6.37609 0.757161 -5.44956C0.438356 -4.76214 0.388543 -3.98506 0.388543 -3.18804C0.388543 -2.44085 0.428394 -1.54421 0.836862 -0.787049C1.26526 0.0199253 1.99253 0.219178 2.4807 0.219178C3.01868 0.219178 3.77584 0.00996264 4.2142 -0.936488C4.533 -1.62391 4.58281 -2.401 4.58281 -3.18804ZM2.4807 0C2.09215 0 1.50436 -0.249066 1.32503 -1.20548C1.21544 -1.80324 1.21544 -2.7198 1.21544 -3.3076C1.21544 -3.94521 1.21544 -4.60274 1.29514 -5.14072C1.48443 -6.32628 2.23163 -6.41594 2.4807 -6.41594C2.80946 -6.41594 3.467 -6.23661 3.65629 -5.25031C3.75592 -4.6924 3.75592 -3.93524 3.75592 -3.3076C3.75592 -2.5604 3.75592 -1.88294 3.64633 -1.24533C3.49689 -0.298879 2.92902 0 2.4807 0Z' id='g2-48'/>
<path d='M2.92902 -6.37609C2.92902 -6.61519 2.92902 -6.63512 2.69988 -6.63512C2.08219 -5.99751 1.20548 -5.99751 0.886675 -5.99751V-5.68867C1.08593 -5.68867 1.67372 -5.68867 2.19178 -5.9477V-0.787049C2.19178 -0.428394 2.16189 -0.308842 1.26526 -0.308842H0.946451V0C1.29514 -0.0298879 2.16189 -0.0298879 2.5604 -0.0298879S3.82565 -0.0298879 4.17435 0V-0.308842H3.85554C2.9589 -0.308842 2.92902 -0.418431 2.92902 -0.787049V-6.37609Z' id='g2-49'/>
<path d='M2.49066 -6.91407L1.15567 -5.55915L1.33499 -5.37983L2.49066 -6.39601L3.63636 -5.37983L3.81569 -5.55915L2.49066 -6.91407Z' id='g2-94'/>
<path d='M3.31756 -0.757161C3.35741 -0.358655 3.6264 0.0597758 4.09465 0.0597758C4.30386 0.0597758 4.91158 -0.0797011 4.91158 -0.886675V-1.44458H4.66252V-0.886675C4.66252 -0.308842 4.41345 -0.249066 4.30386 -0.249066C3.97509 -0.249066 3.93524 -0.697385 3.93524 -0.747198V-2.73973C3.93524 -3.15816 3.93524 -3.5467 3.57659 -3.91532C3.18804 -4.30386 2.68991 -4.46326 2.21171 -4.46326C1.39477 -4.46326 0.707347 -3.99502 0.707347 -3.33748C0.707347 -3.03861 0.9066 -2.86924 1.16563 -2.86924C1.44458 -2.86924 1.62391 -3.06849 1.62391 -3.32752C1.62391 -3.44707 1.5741 -3.77584 1.11582 -3.7858C1.38481 -4.1345 1.87298 -4.24408 2.19178 -4.24408C2.67995 -4.24408 3.24782 -3.85554 3.24782 -2.96887V-2.60025C2.73973 -2.57036 2.04234 -2.54047 1.41469 -2.24159C0.667497 -1.90286 0.418431 -1.38481 0.418431 -0.946451C0.418431 -0.139477 1.38481 0.109589 2.01245 0.109589C2.66999 0.109589 3.12827 -0.288917 3.31756 -0.757161ZM3.24782 -2.39103V-1.39477C3.24782 -0.448319 2.53051 -0.109589 2.08219 -0.109589C1.59402 -0.109589 1.18555 -0.458281 1.18555 -0.956413C1.18555 -1.50436 1.60399 -2.33126 3.24782 -2.39103Z' id='g2-97'/>
<path d='M1.11582 -2.51059C1.17559 -3.99502 2.01245 -4.24408 2.35118 -4.24408C3.37733 -4.24408 3.47696 -2.89913 3.47696 -2.51059H1.11582ZM1.10585 -2.30137H3.88543C4.10461 -2.30137 4.1345 -2.30137 4.1345 -2.51059C4.1345 -3.49689 3.59651 -4.46326 2.35118 -4.46326C1.19552 -4.46326 0.278954 -3.43711 0.278954 -2.19178C0.278954 -0.856787 1.32503 0.109589 2.47073 0.109589C3.68618 0.109589 4.1345 -0.996264 4.1345 -1.18555C4.1345 -1.28518 4.05479 -1.30511 4.00498 -1.30511C3.91532 -1.30511 3.89539 -1.24533 3.87547 -1.16563C3.52677 -0.139477 2.63014 -0.139477 2.53051 -0.139477C2.03238 -0.139477 1.63387 -0.438356 1.40473 -0.806974C1.10585 -1.28518 1.10585 -1.94271 1.10585 -2.30137Z' id='g2-101'/>
<path d='M1.76339 -6.91407L0.328767 -6.80448V-6.49564C1.02615 -6.49564 1.10585 -6.4259 1.10585 -5.93773V-0.757161C1.10585 -0.308842 0.996264 -0.308842 0.328767 -0.308842V0C0.657534 -0.00996264 1.18555 -0.0298879 1.43462 -0.0298879S2.17186 -0.00996264 2.54047 0V-0.308842C1.87298 -0.308842 1.76339 -0.308842 1.76339 -0.757161V-6.91407Z' id='g2-108'/>
<path d='M1.66376 -3.3076V-4.40349L0.278954 -4.2939V-3.98506C0.976339 -3.98506 1.05604 -3.91532 1.05604 -3.42715V-0.757161C1.05604 -0.308842 0.946451 -0.308842 0.278954 -0.308842V0C0.667497 -0.00996264 1.13574 -0.0298879 1.41469 -0.0298879C1.8132 -0.0298879 2.28144 -0.0298879 2.67995 0V-0.308842H2.47073C1.7335 -0.308842 1.71357 -0.418431 1.71357 -0.777086V-2.31133C1.71357 -3.29763 2.132 -4.18431 2.88917 -4.18431C2.9589 -4.18431 2.97883 -4.18431 2.99875 -4.17435C2.96887 -4.16438 2.76961 -4.04483 2.76961 -3.7858C2.76961 -3.50685 2.97883 -3.35741 3.19801 -3.35741C3.37733 -3.35741 3.6264 -3.47696 3.6264 -3.79577S3.31756 -4.40349 2.88917 -4.40349C2.16189 -4.40349 1.80324 -3.73599 1.66376 -3.3076Z' id='g2-114'/>
<path d='M4.1345 -3.34745C4.39352 -3.97509 4.90162 -3.98506 5.06102 -3.98506V-4.2939C4.83188 -4.27397 4.54296 -4.26401 4.31382 -4.26401C4.1345 -4.26401 3.66625 -4.28394 3.44707 -4.2939V-3.98506C3.75592 -3.97509 3.91532 -3.80573 3.91532 -3.55666C3.91532 -3.45704 3.90535 -3.43711 3.85554 -3.31756L2.84932 -0.86675L1.74346 -3.5467C1.70361 -3.64633 1.68369 -3.68618 1.68369 -3.72603C1.68369 -3.98506 2.0523 -3.98506 2.24159 -3.98506V-4.2939C1.98257 -4.28394 1.32503 -4.26401 1.15567 -4.26401C0.886675 -4.26401 0.488169 -4.27397 0.18929 -4.2939V-3.98506C0.667497 -3.98506 0.856787 -3.98506 0.996264 -3.63636L2.49066 0C2.44085 0.129514 2.30137 0.458281 2.24159 0.587796C2.02242 1.13574 1.74346 1.82316 1.10585 1.82316C1.05604 1.82316 0.826899 1.82316 0.637609 1.64384C0.946451 1.60399 1.02615 1.38481 1.02615 1.2254C1.02615 0.966376 0.836862 0.806974 0.607721 0.806974C0.408468 0.806974 0.18929 0.936488 0.18929 1.23537C0.18929 1.68369 0.607721 2.04234 1.10585 2.04234C1.7335 2.04234 2.14197 1.47447 2.38107 0.9066L4.1345 -3.34745Z' id='g2-121'/>
<path d='M0.850809 -0.439352C0.822914 -0.348692 0.781071 -0.174346 0.781071 -0.153425C0.781071 0 0.9066 0.0697385 1.01818 0.0697385C1.14371 0.0697385 1.25529 -0.0209215 1.29016 -0.0836862S1.38082 -0.369614 1.41569 -0.516065C1.45056 -0.648568 1.52727 -0.969365 1.56912 -1.14371C1.61096 -1.29714 1.6528 -1.45056 1.68767 -1.61096C1.76438 -1.89689 1.77833 -1.95268 1.98057 -2.23861C2.17584 -2.51756 2.50361 -2.8802 3.02665 -2.8802C3.43113 -2.8802 3.43811 -2.52453 3.43811 -2.39203C3.43811 -1.9736 3.13823 -1.1995 3.02665 -0.9066C2.94994 -0.711333 2.92204 -0.648568 2.92204 -0.530012C2.92204 -0.160399 3.22889 0.0697385 3.58456 0.0697385C4.28194 0.0697385 4.58879 -0.892653 4.58879 -0.99726C4.58879 -1.08792 4.49813 -1.08792 4.47721 -1.08792C4.37958 -1.08792 4.3726 -1.04608 4.34471 -0.969365C4.18431 -0.411457 3.88443 -0.125529 3.60548 -0.125529C3.45903 -0.125529 3.43113 -0.223163 3.43113 -0.369614C3.43113 -0.530012 3.466 -0.620672 3.59153 -0.934496C3.67522 -1.15068 3.96115 -1.88991 3.96115 -2.28045C3.96115 -2.95691 3.42416 -3.07547 3.05455 -3.07547C2.47572 -3.07547 2.08518 -2.7198 1.87597 -2.44085C1.82715 -2.92204 1.41569 -3.07547 1.12976 -3.07547C0.829888 -3.07547 0.669489 -2.85928 0.578829 -2.69888C0.425405 -2.44085 0.327771 -2.04334 0.327771 -2.00847C0.327771 -1.91781 0.425405 -1.91781 0.446326 -1.91781C0.54396 -1.91781 0.550934 -1.93873 0.599751 -2.12702C0.704359 -2.53848 0.836862 -2.8802 1.10884 -2.8802C1.29016 -2.8802 1.33898 -2.72677 1.33898 -2.53848C1.33898 -2.40598 1.27621 -2.14795 1.2274 -1.95965S1.10884 -1.48543 1.07397 -1.332L0.850809 -0.439352Z' id='g1-110'/>
<path d='M2.33624 -4.43537C2.33624 -4.62366 2.32229 -4.63064 2.12702 -4.63064C1.6807 -4.19128 1.04608 -4.18431 0.760149 -4.18431V-3.93325C0.927522 -3.93325 1.3878 -3.93325 1.77136 -4.12852V-0.571856C1.77136 -0.341719 1.77136 -0.251059 1.07397 -0.251059H0.808966V0C0.934496 -0.00697385 1.79228 -0.0278954 2.05031 -0.0278954C2.2665 -0.0278954 3.14521 -0.00697385 3.29863 0V-0.251059H3.03362C2.33624 -0.251059 2.33624 -0.341719 2.33624 -0.571856V-4.43537Z' id='g3-49'/>
<path d='M3.52179 -1.26924H3.28468C3.26376 -1.11582 3.19402 -0.704359 3.10336 -0.63462C3.04757 -0.592777 2.51059 -0.592777 2.41295 -0.592777H1.12976C1.86202 -1.24134 2.1061 -1.43661 2.52453 -1.76438C3.0406 -2.17584 3.52179 -2.60822 3.52179 -3.27073C3.52179 -4.11457 2.78257 -4.63064 1.88991 -4.63064C1.02516 -4.63064 0.439352 -4.02391 0.439352 -3.38232C0.439352 -3.02665 0.739228 -2.99178 0.808966 -2.99178C0.976339 -2.99178 1.17858 -3.11034 1.17858 -3.36139C1.17858 -3.48692 1.12976 -3.73101 0.767123 -3.73101C0.983313 -4.22615 1.45753 -4.37958 1.78531 -4.37958C2.48269 -4.37958 2.84533 -3.83562 2.84533 -3.27073C2.84533 -2.66401 2.41295 -2.18281 2.18979 -1.93176L0.509091 -0.27198C0.439352 -0.209215 0.439352 -0.195268 0.439352 0H3.31258L3.52179 -1.26924Z' id='g3-50'/>
</defs>
<g id='page1'>
<path d='M-36.9648 -35.9062C-36.9648 -40.582 -40.7578 -44.375 -45.4336 -44.375C-50.1094 -44.375 -53.9023 -40.582 -53.9023 -35.9062C-53.9023 -31.2266 -50.1094 -27.4375 -45.4336 -27.4375C-40.7578 -27.4375 -36.9648 -31.2266 -36.9648 -35.9062Z' fill='#80ff80'/>
<g transform='matrix(1 0 0 1 -5.0817 29.7444)'>
<use x='-45.4333' xlink:href='#g0-120' y='-64.2516'/>
<use x='-39.7394' xlink:href='#g3-49' y='-62.7573'/>
</g>
<path d='M-36.9648 -7.5586C-36.9648 -12.2344 -40.7578 -16.0273 -45.4336 -16.0273C-50.1094 -16.0273 -53.9023 -12.2344 -53.9023 -7.5586C-53.9023 -2.8828 -50.1094 0.9102 -45.4336 0.9102C-40.7578 0.9102 -36.9648 -2.8828 -36.9648 -7.5586Z' fill='#80ff80'/>
<g transform='matrix(1 0 0 1 -5.0817 58.0912)'>
<use x='-45.4333' xlink:href='#g0-120' y='-64.2516'/>
<use x='-39.7394' xlink:href='#g3-50' y='-62.7573'/>
</g>
<path d='M-36.9648 20.7891C-36.9648 16.1133 -40.7578 12.3203 -45.4336 12.3203C-50.1094 12.3203 -53.9023 16.1133 -53.9023 20.7891C-53.9023 25.4648 -50.1094 29.2578 -45.4336 29.2578C-40.7578 29.2578 -36.9648 25.4648 -36.9648 20.7891Z' fill='#80ff80'/>
<g transform='matrix(1 0 0 1 -5.5585 86.438)'>
<use x='-45.4333' xlink:href='#g0-120' y='-64.2516'/>
<use x='-39.7394' xlink:href='#g1-110' y='-62.7573'/>
</g>
<path d='M33.9023 -7.5586C33.9023 -12.2344 30.1094 -16.0273 25.4336 -16.0273S16.9648 -12.2344 16.9648 -7.5586C16.9648 -2.8828 20.7578 0.9102 25.4336 0.9102S33.9023 -2.8828 33.9023 -7.5586Z' fill='#ff8080'/>
<g transform='matrix(1 0 0 1 68.246 59.1843)'>
<use x='-44.7495' xlink:href='#g2-94' y='-64.2516'/>
<use x='-45.4333' xlink:href='#g0-121' y='-64.2516'/>
</g>
<path d='M-37.3867 -32.6875L16.0078 -11.3281' fill='none' stroke='#808080' stroke-miterlimit='10.0375' stroke-width='0.399994'/>
<path d='M15.4883 -13.2539C15.3594 -12.6601 16.0469 -11.4218 16.2852 -11.2187C15.9727 -11.2343 14.6211 -10.8086 14.3047 -10.2929' fill='none' stroke='#808080' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.319992'/>
<path d='M-36.7656 -7.5586H15.3125' fill='none' stroke='#808080' stroke-miterlimit='10.0375' stroke-width='0.400002'/>
<path d='M14.1172 -9.15234C14.2149 -8.55468 15.3125 -7.65625 15.6094 -7.55859C15.3125 -7.45703 14.2149 -6.5625 14.1172 -5.96484' fill='none' stroke='#808080' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.319985'/>
<path d='M-37.3867 17.5703L16.0078 -3.7891' fill='none' stroke='#808080' stroke-miterlimit='10.0375' stroke-width='0.399994'/>
<path d='M14.3047 -4.82422C14.6211 -4.30468 15.9727 -3.8789 16.2852 -3.89843C16.0469 -3.69531 15.3594 -2.45703 15.4883 -1.86328' fill='none' stroke='#808080' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.319992'/>
<g transform='matrix(1 0 0 1 -19.9255 2.4907)'>
<use x='-40.0505' xlink:href='#g2-108' y='-64.2516'/>
<use x='-37.2831' xlink:href='#g2-97' y='-64.2516'/>
<use x='-32.5785' xlink:href='#g2-121' y='-64.2516'/>
<use x='-27.5972' xlink:href='#g2-101' y='-64.2516'/>
<use x='-23.1693' xlink:href='#g2-114' y='-64.2516'/>
<use x='-15.9468' xlink:href='#g2-48' y='-64.2516'/>
</g>
<g transform='matrix(1 0 0 1 50.9415 2.4907)'>
<use x='-40.0505' xlink:href='#g2-108' y='-64.2516'/>
<use x='-37.2831' xlink:href='#g2-97' y='-64.2516'/>
<use x='-32.5785' xlink:href='#g2-121' y='-64.2516'/>
<use x='-27.5972' xlink:href='#g2-101' y='-64.2516'/>
<use x='-23.1693' xlink:href='#g2-114' y='-64.2516'/>
<use x='-15.9468' xlink:href='#g2-49' y='-64.2516'/>
</g>
</g>
</svg>

And it has no text in it. Maybe is it because it's inside a TikZ picture? The fact is that is exactly this text that I want to convert.

14
  • 2
    If you call dvisvgm without option -n, it creates text rather than path elements. Only few browsers support them, though. So, the resulting SVGs might be rendered incorrectly.
    – Martin
    Jun 22, 2018 at 17:01
  • @Martin I updated the question. As you can see I have no text tag. Also, I don't want to use strange character like integrals but only plain text and then use he font already loaded in my page to render it.
    – gvgramazio
    Jun 22, 2018 at 17:13
  • Did you try to call dvisvgm without option -n as mentioned above? That will create text elements rather than paths.
    – Martin
    Jun 22, 2018 at 17:19
  • Sorry, my bad: I misread your comment. Yes, I tried with success. Now I try to include it in my page and I'll post an edit if I encounter troubles (probably)
    – gvgramazio
    Jun 22, 2018 at 17:35
  • How would TikZ calculate the correct size of node shapes if it cannot render the node text? The shapes also cannot be resized with font size changes etc. I think that your diagram can be done only using some JavaScript diagram grawing library
    – michal.h21
    Jun 22, 2018 at 17:39

0

Browse other questions tagged .