7.8k GitHub stars and counting — SVG-Edit/svgedit is a JavaScript project TopGit is tracking across repositories on the platform. Powerful SVG-Editor for your browser
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
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
Contributions
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.
Please let us know by creating an issue or a discussion if you wish to contribute.
I want to use SVGEdit
Thanks to Netlify, you can access the following builds from your favorite browser:
Try SVGEdit V7 (master branch on github)
Try SVGEdit V7 (latest published version on npm)
Prior to V7:
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
Additional tip: you may try a version released on NPM using unpkg, for example, with version 3.2.0
If you want to host a local version of SVGEdit, please follow these instructions:
clone or copy the repository contents from github
run npm i to install dependencies
run npm run build --workspace @svgedit/svgcanvas to build the svgcanvas dependency locally
to test, you can run npm run start to start a local server
and access http://localhost:8000/src/editor/index.html with a supported browser
run npm run build to build a bundle that you can serve from your own web server
I want to contribute to SVGEdit
Thanks!
SVGEdit is made of two major components:
The "svgcanvas" that takes care of the underlying svg editor. It can be used to build your own editor
The "editor" that takes care of the editor UI (menus, buttons, etc.)
You should fork SVGEdit in your github environment and install SVGEdit locally as explained above.
Before you submit your PR, please make sure you run locally:
npm run lint to check that you follow the standardjs rules (https://standardjs.com/rules) for the linter
npm run test to run the Vitest suite (unit/locale checks)
If you intend to contribute on a regular basis, let us know so we can add you to the maintainer team.
I want to integrate SVGEdit into my own Web application
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)
<head>
<!-- You need to include the CSS for SVGEdit somewhere in your application -->
<link href="./svgedit.css" rel="stylesheet" media="all"></link>
</head>
<body>
<!-- svgedit container can be positioned anywhere in the DOM
but it must have a width and a height -->
<div id="container" style="width:100%;height:100vh"></div>
</body>
<script type="module">
/* You need to call the Editor and load it in the <div> */
import Editor from './Editor.js'
/* for available options see the file `docs/tutorials/ConfigOptions.md` */
const svgEditor = new Editor(document.getElementById('container'))
/* set the configuration */
svgEditor.setConfig({
allowInitialUserOverride: true,
extensions: [],
noDefaultExtensions: false,
userExtensions: []
})
/* initialize the Editor */
svgEditor.init()
</script>
</html>
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.
To install the canvas:
npm i -s '@svgedit/svgcanvas'
you can then import it in your application:
import svgCanvas from '@svgedit/svgcanvas'
Supported browsers
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 support old browsers, you may need to use an older version of the package. However, please open an issue if you need support for a specific version of your browser so that the project team can decide if we should support it in the latest version of SVGEdit.
Sample extension based on React
A sample React component was used to build a SVGEdit extension.
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
The most recent commit recorded on SVG-Edit/svgedit was 17 days ago, based on the GitHub push timestamp. The repository has 1.8k forks — one of the better signals of community interest.
How does SVG-Edit/svgedit compare to other Frontend projects?
SVG-Edit/svgedit is tracked by TopGit in the Frontend category, with 7.8k GitHub stars and written in JavaScript. Browse the Frontend topic page on TopGit to compare it against similar projects by stars and activity.
How many stars does SVG-Edit/svgedit have?
SVG-Edit/svgedit has 7.8k GitHub stars — refresh the page for the live number, or check github.com/SVG-Edit/svgedit. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
Is SVG-Edit/svgedit open source?
Yes — SVG-Edit/svgedit ships under the MIT license, which makes its source code freely readable (and, depending on license terms, forkable and reusable). Source: github.com/SVG-Edit/svgedit.
What is SVG-Edit/svgedit?
SVG-Edit/svgedit (SVG-Edit/svgedit) is a JavaScript project on GitHub. From the project's own README: Powerful SVG-Editor for your browser
Where do I read more about SVG-Edit/svgedit?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/SVG-Edit/svgedit is the definitive source.
Read full README in the tab above.
Still deciding about svgedit?
One click hands the question to an AI along with this page — see what it says about svgedit.
/svgedit
