search

andrewcmyers / constrain

Responsive, animated figures in JavaScript/HTML canvases
https://andrewcmyers.github.io/constrain
MIT License
128 stars 2 forks source link

SVG backend #42

Open jonsterling opened 2 years ago

jonsterling commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

andrewcmyers commented 2 years ago

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.