a3f0b8e501
- Breaking change: Rename "svgutils.js" to "utilities.js" (make in conformity with JSDoc module naming convention) - Breaking change: Rename "svgedit.js" to "namespaces.js" (to make clear purpose and avoid confusing with editor) - Breaking change: Rename "jquery-svg.js" to "jQuery.attr.js" - Breaking change: Rename "jquery.contextMenu.js" to "jQuery.contextMenu.js" - Breaking change: Rename "jquery.jpicker.js" to "jQuery.jPicker.js" - Breaking change: Rename "JQuerySpinBtn.css" to "jQuery.SpinButton.css" - Breaking change: Rename "JQuerySpinBtn.js" to "jQuery.SpinButton.js" (to have file name more closely reflect name) - Breaking change: Rename "jquery.svgicons.js" to "jQuery.svgIcons.js" - Breaking change: Rename "jquery.jgraduate.js" to "jQuery.jGraduate.js" - Breaking change: Rename "pathseg.js" to "svgpathseg.js" (as it is a poyfill of SVGPathSeg) - Breaking change: Rename `addSvgElementFromJson()` to `addSVGElementFromJson` for consistency - Breaking change: Rename `changeSvgContent()` to `changeSVGContent()` for consistency - Breaking change: Have `exportPDF` resolve with `output` and `outputType` rather than `dataurlstring` (as type may vary) - Breaking change: Rename `extensions/mathjax/MathJax.js` to `extensions/mathjax/MathJax.min.js` - Breaking change: Avoid recent change to have editor ready callbacks return Promises (we're not using and advantageous to keep sequential) - Breaking change: Avoid recent addition of locale-side function in ext-imagelib for l10n - Breaking change: Change name of ext-arrows.js from `Arrows` to `arrows` for sake of file path (not localized anyways). - Breaking change: Change `addlangData` extension event to `addLangData` for consistency with method name - Breaking change: Have `readLang` return lang and data but do not call `setLang` - Fix: Have general locales load first so extensions may use - Fix: Provide `importLocale` to extensions `init` so it may delay adding of the extension until locale data loaded - Fix: Ensure call to `rasterExport` without `imgType` properly sets MIME type to PNG - Fix: Wrong name for moinsave - Update: Update WebAppFind per new API changes - Enhancement: Make `setStrings` public on editor for late setting (used by `ext-shapes.js`) - Enhancement: Add `extensions_added` event - Enhancement: Add `message` event (Relay messages including those which have been been received prior to extension load) - Enhancement: Allow SVGEdit to work out of the box--avoid need for copying sample config file. Should also help with Github-based file servers - Enhancement: Allow avoiding "name" in extension export (just extract out of file name) - Enhancement: Add stack blur to canvg by default (and refactoring it) - Enhancement: Return `Promise` for `embedImage` (as with some other loading methods) - Enhancement: Supply `importLocale` to `langReady` to facilitate extension locale loading - Enhancement: Recover if an extension fails to load (just log and otherwise ignore) - Enhancement: More i18n of extensions (also fixed issue with some console warnings about missing locale strings); i18nize Hello World too - Enhancement: Allowing importing of locales within `addLangData` - npm: Update devDeps - Docs: Migrate copies of all old wiki pages to docs/from-old-wiki folder; intended for a possible move to Markdown, so raw HTML (with formatting) was not preserved, though named links had their absolute URL links preserved - Docs: Begin deleting `SvgCanvas.md` as ensuring jsdoc has replacements - Docs: Add Edtior doc file for help to general users - Docs: Clarify/simplify install instructions - npm/Docs (JSDoc): Add script to check for overly generic types - Docs (JSDoc): For config/prefs and extension creating, link to tutorials (moved tutorials to own directory to avoid recursion problems by jsdoc) - Docs (JSDoc): Add modules (upper case for usual main entrance files or regular names) - Docs (JSDoc): Fill out missing areas; indicate return of `undefined`; consistency with `@returns` - Docs (JSDoc): Add our own layout template to support overflow - Docs (JSDoc): Use cleverLinks and disallow unknown tags - Docs (JSDoc): Insist on "pedantic" flag; put output directory in config - Docs (JSDoc): Use more precise Integer/Float over number, the specific type of array/function/object - Docs (JSDoc): Use `@throws`, `@enum`, `@event`/`@fires`/`@listens` - Docs: Generally update/improve docs (fixes #92) - Docs: Update links to `latest` path (Avoid needing to update such references upon each release) - Docs: 80 chars max - Refactoring: Drop code for extension as function (already requiring export to be an object) - Refactoring: Object destructuring, `Object.entries`, Object shorthand, array extras, more camelCase variable names - Refactoring: Add a `Command` base class - Refactoring: Simplify svgicons `callback` ready detection - Refactoring: Put `let` or `const` closer to scope - Refactoring: Remove unneeded `delimiter` from regex escaping utility - Refactoring: Clearer variable names - Refactoring: Use (non-deprecated) Event constructors - Testing: Use new Sinon |
||
|---|---|---|
| build/tools | ||
| chrome-app | ||
| clipart | ||
| demos | ||
| dist | ||
| docs | ||
| editor | ||
| examples | ||
| firefox-extension | ||
| opera-widget | ||
| screencasts | ||
| test | ||
| .babelrc | ||
| .eslintignore | ||
| .eslintrc | ||
| .gitignore | ||
| .npmignore | ||
| .remarkrc | ||
| AUTHORS | ||
| CHANGES.md | ||
| LICENSE-MIT.txt | ||
| Makefile | ||
| README.md | ||
| build-html.js | ||
| composer.json | ||
| grep-jsdoc.js | ||
| package-lock.json | ||
| package.json | ||
| rollup-config.config.js | ||
| rollup.config.js | ||
| svgedit-config-es.js | ||
| svgedit-config-iife.js | ||
README.md
SVG-edit
SVG-edit is a fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser.
Demo
Try SVG-edit here
(Also available as a download in releases).
You may also try the pre-release (or its ES6-Module version, assuming a modern browser).
Installation
Quick install
- Clone or copy the repository contents (at least the
editordirectory). - If you need programmatic customization, see its section below.
- Otherwise, just add an iframe to your site, adding any extensions or
configuration (see
docs/tutorials/ConfigOptions.md([ConfigOptions]{@tutorial ConfigOptions})) within the URL:
<iframe src="svgedit/editor/svg-editor.html?extensions=" width="100%" height="100%"></iframe>
Integrating SVG-edit into your own npm package
These steps are only needed if you wish to set up your own npm package incorporating SVGEdit.
- Create your npm package:
npm init(complete the fields). - Install SVG-edit into your package:
npm i svgedit. - Look within
node_modules/svgedit/, e.g.,node_modules/svgedit/editor/svg-editor.htmlfor the files your package needs and use accordingly. npm publish
Programmatic customization
- If you are not concerned about supporting ES6 Modules (see the
"ES6 Modules file" section), you can add your config directly to
svgedit-config-iife.jswithin the SVG-Edit project root. - Note: Do not remove the
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. - Modify or utilize any options. See
docs/tutorials/ConfigOptions.md([ConfigOptions]{@tutorial ConfigOptions}).
ES6 Modules file
svg-editor-es.htmlis 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 insvgedit-config-es.js(in the SVG-Edit project root).- If you are working with the ES6 Modules config but also wish to work with
the normal
svg-editor.htmlversion (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. - JavaScript:
1. Run
npm installwithin thenode_modules/svgeditdirectory to install the build tools for SVG-edit. 1. Runnpm run build-configwithin thenode_modules/svgeditdirectory.- This will rebuild
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.
- This will rebuild
- HTML:
1. If you wish to make changes to both HTML files, it is recommended that you
work and test on
svg-editor-es.htmland then runnpm run build-htmlto have the changes properly copied tosvg-editor.html.
Recent news
- 2018-05-26 Published 3.0.0-alpha.2 with ES6 Modules support
- 2017-07 Added to Packagist: https://packagist.org/packages/svg-edit/svgedit
- 2015-12-02 SVG-edit 2.8.1 was released.
- 2015-11-24 SVG-edit 2.8 was released.
- 2015-11-24 Code, issue tracking, and docs are being moved to github (previously code.google.com).
- 2014-04-17 2.7 and stable branches updated to reflect 2.7.1 important bug fixes for the embedded editor.
- 2014-04-07 SVG-edit 2.7 was released.
- 2013-01-15 SVG-edit 2.6 was released.
Videos
- SVG-edit 2.4 Part 1
- SVG-edit 2.4 Part 2
- SVG-edit 2.3 Features
- Introduction to SVG-edit (Version 2.2)
Supported browsers
The following browsers had been tested for 2.6 or earlier and will probably continue to work with 3.0.
- Firefox 1.5+
- Opera 9.50+
- Safari 4+
- Chrome 1+
- IE 9+ and Edge
Further reading and more information
- See docs for more documentation. See the JSDocs for our latest release.
- Acknowledgements lists open source projects used in svg-edit.
- See AUTHORS file for authors.
- StackOverflow group.
- Join the svg-edit mailing list.
- Join us on
#svg-editonfreenode.net(or use the web client).