Go to file
JFH 0417618156
Fix build issue #862 (#863)
* migrate cypress
* clean local storage before each test
2022-12-11 23:39:44 +01:00
.github Update npmpublish on demand.yml 2022-08-14 16:52:47 +02:00
archive publish on release 2022-08-14 15:27:00 +02:00
badges restore 2 tests and fix snapshot 2021-05-31 00:10:26 +02:00
coverage Fix build issue #862 (#863) 2022-12-11 23:39:44 +01:00
cypress Fix build issue #862 (#863) 2022-12-11 23:39:44 +01:00
docs separate svgcanvas from svgedit 2022-08-14 15:01:51 +02:00
packages/svgcanvas Update packages and remove the instrument step (#854) 2022-11-27 23:01:27 +01:00
src/editor fix bug where font family select doesn't update the Top Panel dropdown (#853) (#856) 2022-11-28 17:57:12 +01:00
.editorconfig - Docs: Update testing info; update CHANGES 2020-02-20 12:31:06 +08:00
.gitignore Fix build issue #862 (#863) 2022-12-11 23:39:44 +01:00
.npmignore fix to doc and config 2022-06-25 23:07:06 +02:00
AUTHORS tr translation finished (#760) 2022-05-08 23:41:20 +02:00
CHANGES.md separate svgcanvas from svgedit 2022-08-14 15:01:51 +02:00
CODE_OF_CONDUCT.md prepare requirements for netlify 2020-09-13 12:44:35 +02:00
FUNDING.yml React test (#700) 2022-01-08 22:41:33 +01:00
LICENSE-MIT.txt separate svgcanvas from svgedit 2022-08-14 15:01:51 +02:00
README.md Update README.md (#844) 2022-11-05 19:32:38 +01:00
babel.config.json Update packages and remove the instrument step (#854) 2022-11-27 23:01:27 +01:00
composer.json separate svgcanvas from svgedit 2022-08-14 15:01:51 +02:00
cypress.config.mjs Fix build issue #862 (#863) 2022-12-11 23:39:44 +01:00
lgtm.yml fix several configuration issue and linter 2021-05-19 23:09:40 +02:00
licenseInfo.json #104 deparam changed ref: https://www.sitepoint.com/get-url-parameters-with-javascript/ 2021-05-27 14:17:01 +05:30
netlify.toml build master with netlify 2021-05-09 22:57:43 +02:00
nyc.config.js Update packages and remove the instrument step (#854) 2022-11-27 23:01:27 +01:00
package-lock.json Fix build issue #862 (#863) 2022-12-11 23:39:44 +01:00
package.json Fix build issue #862 (#863) 2022-12-11 23:39:44 +01:00
rollup.config.mjs Update packages and remove the instrument step (#854) 2022-11-27 23:01:27 +01:00
web-dev-server.config.mjs Update packages and remove the instrument step (#854) 2022-11-27 23:01:27 +01:00

README.md

SVGEdit

npm Actions Status Known Vulnerabilities Total Alerts Code Quality: Javascript

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

screenshot

Contributions

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.

Please let us know with an issue or a discussions if you wish to contribute.

I want to use SVGEdit

Thanks to Netlify, you can access the following builds from your favorite browser:

Prior V7:

We recommand using the V7 version but for older browsers or some abandoned features, you may need to access to old versions of SVGEdit.

Additional tip: you may try a version released on NPM using unpkg for example with version 3.2.0

I want to host SVGEdit in my environment

If you want to host a local version of SVGEdit, please follow these instructions:

  1. Clone or copy the repository contents from github
  2. run npm i to install dependencies
  3. run npm run build --workspace @svgedit/svgcanvasto build the svgcanvas dependency locally
  4. to test, you can run npm run start to start a local server
  5. and access http://localhost:8000/src/editor/index.html with a supported browser
  6. run npm run build to build a bundle that you can serve from your own web server.

I want to contribute to SVGEdit

Thanks!

SVG-Edit is made of two major components:

  1. The "svgcanvas" that takes care of the underlying svg edition. It can be used to build your own editor.
  2. The "editor" that takes care of the editor UI (menus, buttons, etc.)

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
  2. 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.

<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'
  /* for available options see the file `docs/tutorials/ConfigOptions.md` */
  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>

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'

Supported browsers

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.

Sample extension based on React

A sample React component was used to build a svgedit extension. To activate:

  • "npm run build" from the extension folder "src/editor/react-extensions/react-test" in order to create the bundle for the extension.
  • modify "index.html" to activate the extension as a userExtensions
svgEditor.setConfig({
          allowInitialUserOverride: true,
          extensions: [],
          noDefaultExtensions: false,
          userExtensions: ['./react-extensions/react-test/dist/react-test.js']
        })

Further reading and more information

Hosting

SVGedit versions are deployed to:

Deploys by Netlify