2021-05-10 07:28:40 +00:00
< img src = "https://svg-edit.github.io/svgedit/src/editor/images/logo.svg" width = "50" height = "50" / >
2021-11-08 08:28:22 +00:00
# SVGEdit
2018-05-26 01:12:46 +00:00
2019-11-24 09:38:51 +00:00
[](https://www.npmjs.com/package/svgedit)
2022-01-08 21:41:33 +00:00
[](https://github.com/SVG-Edit/svgedit/actions)
2019-11-16 02:52:24 +00:00
[](https://snyk.io/test/github/SVG-Edit/svgedit)
2018-09-22 03:14:53 +00:00
[](https://lgtm.com/projects/g/SVG-Edit/svgedit/alerts)
2019-11-16 02:52:24 +00:00
[](https://lgtm.com/projects/g/SVG-Edit/svgedit/context:javascript)
2019-06-20 05:29:28 +00:00
2022-08-14 13:01:51 +00:00
**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 **
2009-06-03 15:31:06 +00:00
2020-01-06 15:57:55 +00:00
2021-05-19 21:09:40 +00:00
[](https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg)
2020-01-06 15:57:55 +00:00
2021-11-08 08:28:22 +00:00
## Contributions
2018-11-30 10:42:43 +00:00
2022-08-14 13:01:51 +00:00
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 a quite long period. We decided to give this tool a new life by refreshing many aspects.
2021-11-08 08:28:22 +00:00
Please let us know with an issue or a discussions if you wish to contribute.
2018-05-26 01:12:46 +00:00
2022-08-14 13:36:29 +00:00
## I want to use SVGEdit
2018-05-30 02:57:28 +00:00
2022-08-14 13:01:51 +00:00
Thanks to **Netlify** , you can access the following builds from your favorite browser:
2021-01-03 22:19:30 +00:00
2022-11-05 18:32:38 +00:00
- [Try SVGEdit V7 (master branch on github) ](https://svgedit.netlify.app/editor/index.html )
- [Try SVGEdit V7 (latest published version on npm) ](https://unpkg.com/svgedit@latest/dist/editor/index.html )
2021-01-03 22:19:30 +00:00
2022-08-14 13:01:51 +00:00
### Prior V7:
2021-05-15 17:54:43 +00:00
2022-08-14 13:01:51 +00:00
We recommand using the V7 version but for older browsers or some abandoned features, you may need to access to old versions of SVGEdit.
2022-11-05 18:32:38 +00:00
- [Try SVGEdit 6.1.0 here ](https://60a0000fc9900b0008fd268d--svgedit.netlify.app/editor/index.html )
- [Try SVGEdit 5.1.0 here ](https://unpkg.com/svgedit@5.1.0/editor/svg-editor.html )
Additional tip: you may try a version released on NPM using unpkg for example with version 3.2.0
2022-01-02 01:28:01 +00:00
2022-11-05 18:32:38 +00:00
- [https://unpkg.com/svgedit@3.2.0/editor/svg-editor.html ](https://unpkg.com/svgedit@3.2.0/editor/svg-editor.html )
2022-01-03 20:23:06 +00:00
2022-08-14 13:36:29 +00:00
## I want to host SVGEdit in my environment
2021-05-15 17:54:43 +00:00
2022-08-14 13:36:29 +00:00
If you want to host a local version of SVGEdit, please follow these instructions:
2021-05-15 17:54:43 +00:00
2022-08-14 13:01:51 +00:00
1. Clone or copy the repository contents from github
2021-05-19 21:09:40 +00:00
1. run `npm i` to install dependencies
2022-08-22 07:42:26 +00:00
1. run `npm run build --workspace @svgedit/svgcanvas` to build the svgcanvas dependency locally
2022-08-14 13:36:29 +00:00
1. to test, you can run `npm run start` to start a local server
1. and access `http://localhost:8000/src/editor/index.html` with a supported browser
1. run `npm run build` to build a bundle that you can serve from your own web server.
2021-01-03 22:19:30 +00:00
2022-08-14 13:01:51 +00:00
## I want to contribute to SVGEdit
2018-05-26 01:12:46 +00:00
2022-08-14 13:36:29 +00:00
**Thanks!**
- Security fix: 'extPath', 'imgPath', 'extIconsPath', 'canvgPath', 'langPath', 'jGraduatePath', and 'jspdfPath' were not being prevented
- 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
2018-06-06 07:26:20 +00:00
2021-05-19 21:09:40 +00:00
SVG-Edit is made of two major components:
2022-08-14 13:01:51 +00:00
1. The "svgcanvas" that takes care of the underlying svg edition. It can be used to build your own editor.
2021-05-19 21:09:40 +00:00
1. The "editor" that takes care of the editor UI (menus, buttons, etc.)
2009-06-03 15:31:06 +00:00
2022-08-14 13:01:51 +00:00
You should fork SVGEdit in your github environment and install locally SVGEdit as explained above.
Before you submit your PR, please make sure you run locally:
1. `npm run lint` to check that you follow the standardjs rules (https://standardjs.com/rules) for the linter
1. `npm 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 in the maintainer team.
## I want to integrate SVGEdit into my own Web application
V7 is changing significantly the way to integrate and customize SVG-Edit. You can have a look to index.html to see how you can insert a div element into your HTML code and inject the editor into the div.
2023-02-06 21:13:05 +00:00
**Warning: This div can be positionned 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)**
2022-11-05 18:32:38 +00:00
```html
2022-08-14 13:01:51 +00:00
< 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 positionned 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'
2022-11-05 18:32:38 +00:00
/* for available options see the file `docs/tutorials/ConfigOptions.md` */
2022-08-14 13:01:51 +00:00
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 >
```
2022-11-05 18:32:38 +00:00
2022-08-14 13:01:51 +00:00
## I want to build my own svg editor
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'`
2015-11-25 02:32:17 +00:00
## Supported browsers
2022-08-14 13:01:51 +00:00
Developments and Continuous Integration are done with a **Chrome** environment. Chrome, FireFox and Safari recent versions are supported (in the meaning that we will try to fix bugs for these browsers).
Support for old browsers may require 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 the project team can decide if we should support with the latest version.
2022-01-08 21:41:33 +00:00
## Sample extension based on React
2022-08-14 13:01:51 +00:00
A sample React component was used to build a svgedit extension.
2022-01-08 21:41:33 +00:00
To activate:
2022-08-14 13:01:51 +00:00
- "npm run build" from the extension folder "src/editor/react-extensions/react-test" in order to create the bundle for the extension.
2022-01-08 21:41:33 +00:00
- modify "index.html" to activate the extension as a userExtensions
2022-08-14 13:01:51 +00:00
2022-11-05 18:32:38 +00:00
```javascript
2022-01-08 21:41:33 +00:00
svgEditor.setConfig({
allowInitialUserOverride: true,
extensions: [],
noDefaultExtensions: false,
userExtensions: ['./react-extensions/react-test/dist/react-test.js']
})
```
2022-08-14 13:01:51 +00:00
2015-11-25 02:32:17 +00:00
## Further reading and more information
2022-08-14 13:01:51 +00:00
- Participate in [discussions ](https://github.com/SVG-Edit/svgedit/discussions )
- See [AUTHORS ](AUTHORS ) file for authors.
- [StackOverflow ](https://stackoverflow.com/tags/svg-edit ) group.
2020-09-13 10:44:35 +00:00
# Hosting
2022-08-14 13:01:51 +00:00
2020-09-13 10:44:35 +00:00
SVGedit versions are deployed to:
2022-11-05 18:32:38 +00:00
2020-09-23 21:45:41 +00:00
[](https://www.netlify.com)
