SVG-edit
SVG-edit is a fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser.
While we have made some recent releases to SVG-edit for bug fixes, refactoring and documentation to make the codebase more maintainable, the core developers responsible for the bulk of the drawing features are no longer active with the project, so we would love others familiar with SVG to join the project.
See the latest release (or its ES6-Module version, which requires a modern browser).
You may also try it at https://unpkg.com/svgedit/editor/svg-editor.html (which redirects to a versioned URL).
You may also obtain URLs for specific releases.
For testing the latest version in master, you may use
https://raw.githack.com/SVG-Edit/svgedit/master/editor/svg-editor.html.
editor directory).docs/tutorials/ConfigOptions.md
([ConfigOptions]{@tutorial ConfigOptions})) within the URL:<iframe src="svgedit/editor/svg-editor.html?extensions="
width="100%" height="100%"></iframe>
Note that if you want support for the following browsers, you will at least need some polyfills.
For Android Browser 4.4.3-4.4.4, you will need at least fetch.
For the following, you will need at least URL, Promise, and fetch:
And for still older browsers (e.g., IE 8), you will at minimum need a
querySelector polyfill.
These steps are only needed if you wish to set up your own npm package incorporating SVGEdit.
npm init (complete the fields).npm i svgedit.node_modules/svgedit/, e.g., node_modules/svgedit/editor/svg-editor.html
for the files your package needs and use accordingly.npm publishsvgedit-config-iife.js within the SVG-Edit project root.import svgEditor... code which is responsible
for importing the SVG edit code. Versions prior to 3.0 did not require
this, but the advantage is that your HTML does not need to be polluted
with extra script references.docs/tutorials/ConfigOptions.md
([ConfigOptions]{@tutorial ConfigOptions}).svg-editor-es.html is an HTML file directly using ES6 modules.
It is only supported in the latest browsers. It is probably mostly
useful for debugging, as it requires more network requests.
If you would like to work with this file, you should make configuration
changes in svgedit-config-es.js (in the SVG-Edit project root).svg-editor.html version (so your code can work in older
browsers or get the presumable performance benefits of this file which
references JavaScript rolled up into a single file), you can follow these
steps after any config changes you make, so that your changes can also be
automatically made available to both versions.npm install within the node_modules/svgedit directory to
install the build tools for SVG-edit.
1. Run npm run build-config within the node_modules/svgedit directory.
svgedit-config-iife.js (applying Babel to allow
it to work on older browsers and applying Rollup to build all
JavaScript into one file). The file will then contain non-ES6 module
JavaScript that can work in older browsers. Note that it bundles all
of SVGEdit, so it is to be expected that this file will be much
larger in size than the original ES6 config file.svg-editor-es.html and then run
npm run build-html to have the changes properly copied to
svg-editor.html.@babel/polyfillThe following browsers had been tested for 2.6 or earlier and will probably continue to work with 3.0.
#svg-edit on freenode.net (or use the
web client).5.0.0
@babel/polyfill to
core-js-bundle and regenerator-runtime replacementsdist/extensions alongside
JavaScript extension files using themextPath in ext-server_opensave.jsavoidClientSide to avoid using
client-side support by default (and always require server)setCustomHandlers,
loadFromString, loadFromDataURI so known when ready and setrequire-returns; avoid
Closure syntax; reenable jsdoc/valid-jsdoc as fixed; notes
re: valid-jsdoc replacement; use same namepathPromise resolve type;
add typedef for dialog result object; add an
ArbitraryCallbackResult type; prefer voidbuild-doc to build-docs, types-doc to
types-docs); add open-docs scriptFAQs
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.