Automatically generate SVG images from .TEX files

[jmooring]

This post from @atishay is related:

Show Hugo: Compile time Latex -> SVG

As I was moving my website to hugo, I had this goal of making something that works without JS. Therefore I spent effort to ensure I can have all functionality at compile time to speed up the runtime of my website. Hugo provides syntax highlighting out of box. I wanted to do the same with Latex. Since hugo does not support calling command line, I ended up creating a service to convert Latex to SVG that can be used at compile time. Here is a short-code that I use to call it: <!-- tex --> {{ $inli…

In summary, if you include something like this in your markdown:

{{< tex >}}
\begin{bmatrix} 
a & b & c \\
c & d & d\\
e & f & g \\
\end{bmatrix}
\quad
{{< /tex >}}

It will render this HTML:

<svg class="tex" 
  xmlns:xlink="http://www.w3.org/1999/xlink" width="14.544ex" height="9.509ex" style="vertical-align: -4.171ex;" viewBox="0 -2298.3 6262 4094.3" role="img" focusable="false" 
  xmlns="http://www.w3.org/2000/svg" aria-labelledby="MathJax-SVG-1-Title">
  <title id="MathJax-SVG-1-Title">
\begin{bmatrix} 
a &amp; b &amp; c \\
c &amp; d &amp; d\\
e &amp; f &amp; g \\
\end{bmatrix}
\quad
  </title>
  <defs aria-hidden="true">
    <path stroke-width="1" id="E1-MJMAIN-5B" d="M118 -250V750H255V710H158V-210H255V-250H118Z"></path>
    <path stroke-width="1" id="E1-MJMATHI-61" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path>
    <path stroke-width="1" id="E1-MJMATHI-62" d="M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z"></path>
    <path stroke-width="1" id="E1-MJMATHI-63" d="M34 159Q34 268 120 355T306 442Q362 442 394 418T427 355Q427 326 408 306T360 285Q341 285 330 295T319 325T330 359T352 380T366 386H367Q367 388 361 392T340 400T306 404Q276 404 249 390Q228 381 206 359Q162 315 142 235T121 119Q121 73 147 50Q169 26 205 26H209Q321 26 394 111Q403 121 406 121Q410 121 419 112T429 98T420 83T391 55T346 25T282 0T202 -11Q127 -11 81 37T34 159Z"></path>
    <path stroke-width="1" id="E1-MJMATHI-64" d="M366 683Q367 683 438 688T511 694Q523 694 523 686Q523 679 450 384T375 83T374 68Q374 26 402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487H491Q506 153 506 145Q506 140 503 129Q490 79 473 48T445 8T417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157Q33 205 53 255T101 341Q148 398 195 420T280 442Q336 442 364 400Q369 394 369 396Q370 400 396 505T424 616Q424 629 417 632T378 637H357Q351 643 351 645T353 664Q358 683 366 683ZM352 326Q329 405 277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q233 26 290 98L298 109L352 326Z"></path>
    <path stroke-width="1" id="E1-MJMATHI-65" d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z"></path>
    <path stroke-width="1" id="E1-MJMATHI-66" d="M118 -162Q120 -162 124 -164T135 -167T147 -168Q160 -168 171 -155T187 -126Q197 -99 221 27T267 267T289 382V385H242Q195 385 192 387Q188 390 188 397L195 425Q197 430 203 430T250 431Q298 431 298 432Q298 434 307 482T319 540Q356 705 465 705Q502 703 526 683T550 630Q550 594 529 578T487 561Q443 561 443 603Q443 622 454 636T478 657L487 662Q471 668 457 668Q445 668 434 658T419 630Q412 601 403 552T387 469T380 433Q380 431 435 431Q480 431 487 430T498 424Q499 420 496 407T491 391Q489 386 482 386T428 385H372L349 263Q301 15 282 -47Q255 -132 212 -173Q175 -205 139 -205Q107 -205 81 -186T55 -132Q55 -95 76 -78T118 -61Q162 -61 162 -103Q162 -122 151 -136T127 -157L118 -162Z"></path>
    <path stroke-width="1" id="E1-MJMATHI-67" d="M311 43Q296 30 267 15T206 0Q143 0 105 45T66 160Q66 265 143 353T314 442Q361 442 401 394L404 398Q406 401 409 404T418 412T431 419T447 422Q461 422 470 413T480 394Q480 379 423 152T363 -80Q345 -134 286 -169T151 -205Q10 -205 10 -137Q10 -111 28 -91T74 -71Q89 -71 102 -80T116 -111Q116 -121 114 -130T107 -144T99 -154T92 -162L90 -164H91Q101 -167 151 -167Q189 -167 211 -155Q234 -144 254 -122T282 -75Q288 -56 298 -13Q311 35 311 43ZM384 328L380 339Q377 350 375 354T369 368T359 382T346 393T328 402T306 405Q262 405 221 352Q191 313 171 233T151 117Q151 38 213 38Q269 38 323 108L331 118L384 328Z"></path>
    <path stroke-width="1" id="E1-MJMAIN-5D" d="M22 710V750H159V-250H22V-210H119V710H22Z"></path>
    <path stroke-width="1" id="E1-MJSZ4-23A1" d="M319 -645V1154H666V1070H403V-645H319Z"></path>
    <path stroke-width="1" id="E1-MJSZ4-23A3" d="M319 -644V1155H403V-560H666V-644H319Z"></path>
    <path stroke-width="1" id="E1-MJSZ4-23A2" d="M319 0V602H403V0H319Z"></path>
    <path stroke-width="1" id="E1-MJSZ4-23A4" d="M0 1070V1154H347V-645H263V1070H0Z"></path>
    <path stroke-width="1" id="E1-MJSZ4-23A6" d="M263 -560V1155H347V-644H0V-560H263Z"></path>
    <path stroke-width="1" id="E1-MJSZ4-23A5" d="M263 0V602H347V0H263Z"></path>
  </defs>
  <g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)" aria-hidden="true">
    <g transform="translate(0,2153)">
      <use xlink:href="#E1-MJSZ4-23A1" x="0" y="-1155"></use>
      <g transform="translate(0,-2054.4966887417218) scale(1,0.5033112582781457)">
        <use xlink:href="#E1-MJSZ4-23A2"></use>
      </g>
      <use xlink:href="#E1-MJSZ4-23A3" x="0" y="-3161"></use>
    </g>
    <g transform="translate(834,0)">
      <g transform="translate(-11,0)">
        <use xlink:href="#E1-MJMATHI-61" x="0" y="1353"></use>
        <use xlink:href="#E1-MJMATHI-63" x="48" y="-47"></use>
        <use xlink:href="#E1-MJMATHI-65" x="31" y="-1447"></use>
      </g>
      <g transform="translate(1519,0)">
        <use xlink:href="#E1-MJMATHI-62" x="60" y="1353"></use>
        <use xlink:href="#E1-MJMATHI-64" x="13" y="-47"></use>
        <use xlink:href="#E1-MJMATHI-66" x="0" y="-1447"></use>
      </g>
      <g transform="translate(3069,0)">
        <use xlink:href="#E1-MJMATHI-63" x="45" y="1353"></use>
        <use xlink:href="#E1-MJMATHI-64" x="0" y="-47"></use>
        <use xlink:href="#E1-MJMATHI-67" x="21" y="-1447"></use>
      </g>
    </g>
    <g transform="translate(4594,2153)">
      <use xlink:href="#E1-MJSZ4-23A4" x="0" y="-1155"></use>
      <g transform="translate(0,-2054.4966887417218) scale(1,0.5033112582781457)">
        <use xlink:href="#E1-MJSZ4-23A5"></use>
      </g>
      <use xlink:href="#E1-MJSZ4-23A6" x="0" y="-3161"></use>
    </g>
  </g>
</svg>

Which looks like this on screen:

Maybe I’m easily impressed, but this strikes me as immensely clever.