SVG-edit
SVG-edit is a fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser.
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.The 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).4.0.0
loadSvgString now returns a Promise rather than
accepting a callback.editor.ready as Promises, only
resolving after all resolve. May require no changes unless for timing.editor.runCallbacks return a Promise which
resolves upon all callbacks resolving.npx (used with babel-node) to allow Node files
for HTML building and JSDoc type checking to be expressed as ESM.addExtension now throws upon a repeated attempt to
add an already-added extensionsvgCanvas.rasterExport fourth (callback)
argument, collapsing fifth (options) to fourthsvgCanvas.exportPDF third (callback)
argumenteditor/contextmenu.js add now throws instead
of giving a console error only upon detecting a bad menuitem or
preexisting context menusvgCanvas.embedImage second (callback)
argumentgetHelpXML a class instead of instance method
of RGBColordbox (and
alert/confirm/process/prompt/select) to avoid a callback argument
in favor of returning a PromiseupdateGripCursor moved to be class method
of Selector rather than instance methodsubpathIsClosed moved to be class method
of Path rather than instance methodlangReady multiple times or seriallysvgCanvas.runExtension to run just one extension and
add nameFilter callback to runExtensions$ (our wrapped jQuery) to extensions so can use
its plugins, e.g., dbox with its alertalert in webappfindeditor.ready now returns a Promise resolving when all
callbacks have resolvednoAlert option as part of second argument to
loadSvgString (and loadFromURL and loadFromDataURI) to avoid UI
alert (and trigger promise rejection)dbox as a separate module for alert, prompt, etc. dialogsPaintBox as class; other misc. tweaks; no bitwise
in canvg.eslintrc -> .eslintrc.js per recommendation and to more transparently
allow comments; apply new strict eslint-config-ash-nazg rules.mouseUp (can also be an object) and
mouseDown (may also be a boolean) of pathActions; other JSDoc
additions/improvementsFAQs
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.