This is a proof of concept of a cutting/pasting operation in SVG, which could be used for saving as SVG in JS Paint.
Note the exponential slowdown when cutting/pasting multiple times.
This is due to the fact that all the contents of the document are cloned (using <use>
)
and masked/clipped in order to separate the cutout region from the rest of the document.
When cloning the document content, it includes any previous clones.
Therefore, if you have one circle, and cut/paste it twice,
it will have to render the circle in potentially four places.
It may be more feasible to embed a raster image in the SVG, so it looks exactly as the canvas, and only use special logic for text elements, in order to support text selection and screen readers.
However it would need some limits to avoid the exponential rendering problem. A given piece of text could be limited to a specific number of clones, and preference given to larger portions of text.
In the end, it would therefore always have edge cases where it would not (fully) work. It would be a trade-off between performance and correctness.
Besides that, if you erase text, it should no longer be selectable, but this would be hard to codify. It may be best to leave text selection up to OCR tools like Project Naptha.