SVG-edit

SVGEdit is a fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser. SVGEdit is based on a powerful SVG canvas @svgedit/svgcanvas SVGEdit is the most popular open source SVG editor. It was started more than 15 years ago by a fantastic team of developers. Unfortunately, the product was not maintained for quite a long time. We decided to give this tool a new life by refreshing many aspects. We recommend using the V7 version but for older browsers or some abandoned features, you may need to access older versions of SVGEdit. Try SVGEdit 6.1.0 here Try SVGEdit 5.1.0 here 1. clone or copy the repository contents from github 1. run npm i to install dependencies 1. run npm run build --workspace @svgedit/svgcanvas to build the svgcanvas dependency locally 1. to test, you can run npm run start to start a local server 1. and access with a supported browser 1. run npm run build to build a bundle that you can serve from your own web server You should fork SVGEdit in your github environment and install SVGEdit locally as explained above. 1. npm run lint to check that you follow the standardjs rules ( for the linter 1. npm run test to run the Vitest suite (unit/locale checks) V7 is changing significantly the way to integrate and customize SVGEdit. You can have a look at index.html to see how you can insert a div element into your HTML code and inject the editor into the div . Warning: This div can be positioned anywhere in the DOM but it must have a numeric width and a numeric height (i.e. not 'auto' which happens when the div is hidden) I want to build my own svg editor You can just use the underlying canvas and use it in your application with your favorite framework. See example in the demos folder or the svg-edit-react repository. Development and Continuous Integration are done with a Chrome environment. Recent versions of Chrome, FireFox, and Safari are supported (in the meaning that we will try to fix bugs for these browsers). To activate: "npm run build" from the extension folder "src/editor/react-extensions/react-test" in order to create the bundle for the extension. modify "index.html" to activate the extension as a userExtensions Further reading and more information Participate in discussions See AUTHORS file for authors. StackOverflow group.