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 13 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.
Thanks to Netlify, you can access the following builds from your favorite browser:
We recommend using the V7 version but for older browsers or some abandoned features, you may need to access older versions of SVGEdit.
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:
npm i to install dependenciesnpm run build --workspace @svgedit/svgcanvas to build the svgcanvas dependency locallynpm run start to start a local serverhttp://localhost:8000/src/editor/index.html with a supported browsernpm run build to build a bundle that you can serve from your own web serverThanks!
SVGEdit is made of two major components:
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 linternpm run test to run a suite of Cypress tests (https://www.cypress.io/)If you intend to contribute on a regular basis, let us know so we can add you to the maintainer team.
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'))
/* initialize the Editor */
svgEditor.init()
/* set the configuration */
svgEditor.setConfig({
allowInitialUserOverride: true,
extensions: [],
noDefaultExtensions: false,
userExtensions: []
})
</script>
</html>
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'
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.
A sample React component was used to build a SVGEdit extension.
To activate:
userExtensionssvgEditor.setConfig({
allowInitialUserOverride: true,
extensions: [],
noDefaultExtensions: false,
userExtensions: ['./react-extensions/react-test/dist/react-test.js']
})
SVGEdit versions are deployed to:
FAQs
Powerful SVG-Editor for your browser
The npm package svgedit receives a total of 10,864 weekly downloads. As such, svgedit popularity was classified as popular.
We found that svgedit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.