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. You will need to have Node.js/npm installed.
npm init (complete the fields).npm i --save svgedit.node_modules/svgedit/, e.g., node_modules/svgedit/editor/svg-editor.html
for the files your package needs and use accordingly (from outside of
node_modules).npm publish.svgedit-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 svgedit directory
(node_modules/svgedit if you installed via npm) and the root
repository directory if you cloned the Git repository instead.
This will install the build tools for SVG-edit.npm run build-by-config within the svgedit directory mentioned
in the step above.
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.1.0
avoidClientSideDownload in place of
avoidClientSide (config for ext-server_opensave.js).jQuery.svgIcons.js (evident
when attempting to load from file: URL in Chrome)avoidClientSideOpen config for
ext-server_opensave.jsstatic keyword for classesfor...of, event.key (newly enforced linting)types-docs script as being handled in ESLint.editorconfigbuild-config to build-by-configFAQs
Powerful SVG-Editor for your browser
The npm package svgedit receives a total of 9,407 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
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.