Evalualte if SVG stretching works with Canvas

[creativecreatorormaybenot]

Description

There is a neckbreaker for CaTeX without SVG: stretching symbols like \sqrt. This is because CaTeX is based on https://github.com/katex/katex-fonts.

Flutter Math just uses SVGs using flutter_svg, however, that does not seem like an optional solution, especially because of missing web support.

This means that we need to evaluate whether we can perform this task using canvas.

According to @znjameswu, this should be feasible. It is not exactly low effort - it is the next required step before moving on to finalize the implementation.

---

This obviously applies to all other SVG operation - this is just the example that we came up with.

[znjameswu]

I've been investigating a possible solution for DomCanvas backend mentioned in this flutter_svg issue and flutter_svg_web_example. The basic idea is to write a light-weight platform view for DomCanvas and use HtmlElementView to render SVGs. I haven't experimented with this yet, but it may work. I will also track this issue in my repository.

For CanvasKit backend, according to author of flutter_svg, flutter_svg should work mostly fine.

[znjameswu]

FYI, I just succeeded in my experiment using aforementioned method in flutter_svg_web_example.

Basically it was the same code. But there are two caveats from that repository:

1. We have to manually set the HTML SVG element's vertical-align to 'top', because so many svgs in KaTeX are super flat, and they can't fill the line height given by Flutter Web's positioning element, and causes them to glitch and disapper. (Probably a Flutter Web layout bug)
2. We have to include svg xml schema in the svg string. For some reason, the svg string without xml schema won't render in my tests.

I've already put up a working web demo for my library. Flutter Math Demo. My implementation is under /lib/src/render/svg/web folder, welcom to check out.

[TheOneWithTheBraid]

Theoretically, this should work when using --dart-define=FLUTTER_WEB_USE_SKIA=true for compiling. As soon as Skia should replace the DOM+Canvas as the default graphics library on the web, is should work without any external help.

See https://github.com/flutter/flutter/issues/63162

[creativecreatorormaybenot]

@TheOneWithTheBraid Yes, in that case using flutter_svg seems logical.