Add SVG export for pen plotting

[doersino]

As requested on Twitter...

@thatsmaik: Any chance to export it in SVG for pen plotting?

@doersino: That wouldn’t be too much trouble to implement, I believe – are there any constraints regarding the structure of the SVG that I should know about? Is there an existing standard? (I assume color/opacity/etc. aren’t relevant in this context, only line geometry?)

@thatsmaik: I'm a newbie to pen plotting so no expert opinion here - there's no constrains as far as i concern.
Exactly, line geometry is key and the only thing you need. Color, thickness etc. is all 100% pen dependent.
This would be such an awesome feature! Glowing star

@thatsmaik: Maybe a feature which lets you extract different SVG files / layers based on color could come in handy. :) Otherwise you'll need to separate them by hand for each color. [...]

I think it'd be best to have the "Download" button pop up a sheet (similar to the share button) where the user could choose between PNG and SVG (and perhaps JPG, too). This would also provide space for some explanation. Perhaps alt+click could invoke the present "instant" PNG download behavior (this could also be carried over to the share button for share URL copying).

[thatsmaik]

Thanks again for putting this on your features list! Really excited for the SVG export!

Yes, i think a pop up with further explanation and a choice between PNG, SVG and probably JPG would be a good option.
Maybe consider to rename the button from "Download" to maybe "Export" or something.

Are you using Paper.js or alike for your graphics or how does it come that SVG export isn't such a huge thing to implement?

[doersino]

It's all vanilla JavaScript – but because what UJI generates is really just a sequence of line segments, it's not too hard to collect that information during the generation stage and then pretty-print it as an SVG <path> element upon request.

(Come to think of it, I wonder how to treat line segments that fall outside the "drawing area" – when drawing to a <canvas> element, anything outside its bounds is necessarily hidden, but with an SVG, I might have to manually clip line segments. I don't know if pen plotter software respects, say, the viewBox attribute.)

[doersino]

Done!

I've implemented it such that each iteration is a separate <path> element – that seemed like it could potentially be useful.

Also, after taking a very cursory look at other plotting-and-SVG-related bits of code here and there, I believe delineating the bounds of the drawing via the viewBox attribute is generally supported – please let me know if that's true for your use case. "Manually" (i.e., in my code) clipping the drawing at the edges of the canvas is tricky, there's a bunch of edge cases, but I'm sure I could get it done if needs be.

Note that some of the included examples yield absoutely massive SVG files (despite trunchating coordinates to two decimal places), which I suspect would be impossible to plot. Reducing the number of line segments will likely be essential here if you want your plots to finish before the pen runs out of ink and/or the paper wears out. 😉

Let me know if this works for you and what I could improve – I'd love to see an actual, phyiscal artifact made with UJI!

---

Maybe a feature which lets you extract different SVG files / layers based on color could come in handy. :)

The only scenario in which the line changes color (apart from interactions with itself and the background when using some of the blend modes, which doesn't apply to a plotter-based use case) is when the hue shift slider is used, and that's a very gradual color shift where each line is differently colored – so I don't think this feature would actually be all that useful?