constrain icon indicating copy to clipboard operation
constrain copied to clipboard

SVG backend

Open jonsterling opened this issue 2 years ago • 3 comments

This might be a little hard, but I was having a look at the postscript backend (which looks very nice and useful), and it made me think that I could get a lot out of having an SVG backend. The benefits are:

  1. Vector drawing rather than pixel drawing: the user can zoom in
  2. Accessibility features: in addition to zooming, we can attach data to assist screenreaders, etc.
  3. The ability to embed MathML directly, rather than embedding 'screenshots' of math

jonsterling avatar Jul 27 '22 11:07 jonsterling

https://github.com/gliffy/canvas2svg This looks promising...

Update: I have some hacked version of the library above now which is allowing me to (1) draw to SVG rather than to canvas, and (2) embed MathML directly into the SVG as a <foreignObject>, which solves the accessibility problems.

The interactive features are not supported, and the code is very janky. But maybe as a proof of concept, it is cool 😎

Screenshot 2022-07-27 at 2 43 54 PM

jonsterling avatar Jul 27 '22 11:07 jonsterling

You can look at / play with my hacked up version here: https://github.com/jonsterling/constrain/blob/svg/examples/svg.html

jonsterling avatar Jul 27 '22 12:07 jonsterling

An SVG back end is a nice idea. I wonder if the right way to render is to interpose at a higher level of abstraction. For example, SVG has a rounded rectangle as a builtin, whereas interposing at the canvas level will mean turning it into a bunch of small SVG drawing commands.

andrewcmyers avatar Jul 30 '22 14:07 andrewcmyers