SVG output

[jbaayen]

SVG output, as offered by MathJax, would be great to have. Applications include formulas in diagrams, for example.

[kevinbarabash]

@jbaayen there's been some work to render to canvas, see #251. Rendering to other targets is not a huge priority. We have discussed providing some sort of intermediate representation to make this easier.

[mbourne]

@jbaayen: I'm developing SVG graphs, and the approach I'm using when including formulas is to overlay the SVG with HTML elements. There are some examples on this page:

http://www.intmath.com/exponential-logarithmic-functions/calculating-e.php

It suits my purposes.

[jbaayen]

@kevinbarabash @mbourne, these sound like steps in the right direction!

We're looking at an out-of-browser application though, where SVG is the graphics format. Given an intermediate representation, we may be able to develop the SVG output ourselves.

[miestasmia]

I'd just like to add that foreignObject is horrendously broken in WebKit and blink. Positioning is completely off.

E.g. see https://stackoverflow.com/a/10353045/1248084

[pnsaevik]

If anyone decides to implement SVG output, it would be nice to do it with <text> tags instead of outlined glyphs. This way it would be much faster to load. MathJax uses outlined glyphs.

[gagern]

@pnsaevik: If one were to use <text>, one would have to make sure that the fonts used are the ones shipped with KaTeX. In a browser, it might suffice to use the same CSS file as for KaTeX. For stand-alone SVG, one might have to link to external resources or embed the fonts as data: URIs. And one would have to choose between WebFonts and SVG fonts. The latter don't support various features like hinting, but on the other hand SVG fonts are the only font the SVG 1.1 spec requires viewers to support. Not that it were actually supported in the wild, though.

[pnsaevik]

@gagern Thanks for your comments. It would definitely have to rely on webfonts, just as regular KaTeX. And it would be for the use within browsers, coupled with the KaTeX CSS file. But then, one may argue that CSS is sufficient, and that SVG provides no extra advantage.

[bryevdv]

But then, one may argue that CSS is sufficient, and that SVG provides no extra advantage.

I realize this is probably not currently high on any priority list, but just by way of documenting use-cases: Bokeh just added an SVG output option for plots (a long requested feature). Users can also render KaTeX labels on plots with an extension, but since these are separate DOM elements, they are missing from the SVG export. We use canvas2svg to convert the plot canvas to SVG, and presumably if KaTeX could generate SVG as well, we could find a way to merge things together. This would make users wanting to export Bokeh plots for inclusion in scientific publications very extremely happy.

[jpatel3]

@mbourne Are you using foreignObject? how are you referring the position and element in SVG?

[mbourne]

@jpatel3 No, I'm not using foreignObject. For the particular example I linked to above, I'm using a PHP -> SVG library.

My text creating function has the following parameters:

function text($pt,$str,$pos,$class,$attrs,$brdParams) {...}

where $pt is something like [1, 3] and $str is either plain text (which creates an ordinary SVG element), or if it contains HTML tags or KaTeX, it creates an absolute-positioned div that sits on top of the SVG graph at position [1,3], determined by the pixel count from the left and top of the div containing the SVG element, allowing for the position of origin and any padding, using this.

$htmlTxt = "<div class=\"$class svgHtml\" style=\"top:".round($height - $pt[1]*$yunitlength-$oy-$padding)."px;left:".round($pt[0]*$xunitlength+$ox)."px\">$str</div>";

As the whole thing is being created server-side, any KaTeX sitting on top of the SVG is processed along with the rest of the page on page load.

[JacobBeaudry]

Another use case: being able to combine mathematical symbols with text within a text SVG element. It is possible to do with foreignObject; however, the text element has various attributes that make it substantially easier to manipulate (e.g. text-anchor & not having to know the dimensions of the containing box in advance, which greatly facilitates transformations).

[fabiospampinato]

Additional benefits of outputting to SVG: an SVG can base64-encoded and directly piped into an <img> tag, which would lead to fewer DOM nodes on the page (which generally makes things faster) and it also would require essentially 0 sanitization whatsoever, speeding things up that way too.

[joshsunshine]

In the Penrose project, we currently use MathJax to render labels for our diagrams. We would love to switch to KaTeX, but we need SVG support to do so.

[enjoysmath]

Hello, I would like to tird this proposal. I also need SVG output. Right now I'm limited to PNG screen captures of a QWebEnginePage displaying the KaTeX-rendered page. This is not preferable. What's preferable is to preserve the zoomability by keeping things SVG, but I don't know how to grab it!

🥇

[StarHosea]

really need this feature for ouput pdf

[mbourne]

@StarHosea But you can do PDF output of pages containing KaTeX math without SVG. What will SVG give you that HTML doesn't?

[StarHosea]

@mbourne We generate PDF in node server by tools like pdfmake to, which doesn't support html .
I am trying to use MathJax to render Tex to svg , and then render to pdf

[HKGx]

I am trying to use MathJax to render Tex to svg , and then render to pdf

@StarHosea, I hacked my way using MathJax to render SVG files in https://github.com/HKGx/rendertex/tree/main/src/services

[StarHosea]

@HKGx Thanks a lot , I used mathjax-node like this

import  mjApi  from 'mathjax-node';
mjApi.start();
const formula = 'k = \frac{2\pi}{\lambda}';
const result = await mjApi.typeset({
    math: formula,
    format: 'TeX',
    svg: true
  });

[enjoysmath]

How did you hax it, and can you hax it for KaTeX?

…

On Fri, Mar 24, 2023 at 7:28 PM StarHosea ***@***.***> wrote: @HKGx <https://github.com/HKGx> Thanks a lot , I used mathjax-node like this import mjApi from 'mathjax-node';mjApi.start();const formula = 'k = \frac{2\pi}{\lambda}';const result = await mjApi.typeset({ math: formula, format: 'TeX', svg: true }); — Reply to this email directly, view it on GitHub <#375 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMIF55D5BN5AYYUHVV7OYLW5ZJ6DANCNFSM4BTFENHA> . You are receiving this because you commented.Message ID: ***@***.***>

[MohammadRaziei]

Is there any solutions? I used katex with d3js to create an SVG. but when I export it... none of maths shows in exported svg. so I need to render the input as SVG in foreignObject