How to make a simple SVG editor in JavaScript?

Question

JavaScript

It was necessary to make a simple editor of curtains in the web application. Specifically, scans of building plans will be loaded into the application. It is necessary to be able to interactively draw and edit certain areas on this plan as polygons. Then the coordinates of the vertices of these polygons will be saved to the database, they will be rendered for users, events will be hung on them, etc.
I tried to immediately find some ready-made simple solutions, and to my surprise I did not find it. I don’t want to reinvent the wheel, and my knowledge of JS is at an average level. I also don’t want to hang up some monstrous frameworks.
Please tell me some libraries or solutions for my task. It is desirable with the ability to continue to finish the functionality of the editor.

Answer 1

Yes, and my knowledge of JS is at an intermediate level.

My knowledge is at an intermediate level, and I can safely write such a thing. Draw some conclusion from this.
The easiest and fastest way is to use Vuejs (well, or ReactJS). 80kb is not monstrous. Vuejs works just as well with svg as it does with html. Just create the necessary components, change their state on certain events.
Here is an example of working with SVG on vuejs https://ru.vuejs.org/v2/examples/svg.html

Answer 2

It will be difficult to work with polygons, in js they use path, this is more flexible here is an example:
https://codepen.io/wokster/pen/qyrywL
I do not quite understand what "monstrous" is? It seems to me that you can take something like vue.js and implement all this. Including with polygons, but remember my word, you will regret more than once during the development process that this is not a path.
Here you have to invent. For if the task was solved, then it is for sale. This is a laborious task, and for sure, if someone did it, then for someone for money, and as a result, it cannot be thrown into free access. He planned to do this himself, but refused due to lack of time. Not everything is as simple as it seems at first glance.

Answer 3

The first few pages of links on Google lead to dozens of well-functioning SVG editors, examples, and articles. Are you sure you were looking for? bfy.tw/KeTL