Go to file

Geoff Youngs 173dd2607a Fix/rotation recalc compound transforms (#1083 )

* Fix rotation recalculation corrupting compound transforms

Two bugs in the rotation center recalculation triggered by attribute
changes on rotated elements:

1. The recalculation fires for ALL attribute changes (stroke-width,
   fill, opacity, etc.) even though only geometric attributes (x, y,
   width, height, d, points, etc.) can change the bbox center. This
   causes unnecessary and incorrect rotation center updates.

2. In undo.js, the center is computed through ALL remaining transforms
   via transformListToTransform(tlist).matrix, but for compound
   transform lists like [translate(tx,ty), rotate(angle)], the
   pre-rotation translate leaks into the center calculation, producing
   rotate(angle, bcx+tx, bcy+ty) instead of the correct
   rotate(angle, bcx, bcy).

3. In history.js (undo/redo), the code replaces the ENTIRE transform
   attribute with just rotate(...), completely destroying any other
   transforms (translate, scale, etc.) in the list.

Fixes:
- Guard recalculation with a BBOX_AFFECTING_ATTRS set so non-geometric
  attribute changes skip the rotation block entirely.
- In undo.js, use transformListToTransform(tlist, n, max) to compute
  the center through only post-rotation transforms.
- In history.js, replace string-based transform replacement with
  transform list API that finds and updates only the rotation entry,
  preserving all other transforms. Extract shared logic into
  relocateRotationCenter() helper.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add tests for rotation recalculation with compound transforms

Tests demonstrate and verify fixes for three bugs:

1. Non-geometric attributes (stroke-width, fill, opacity) no longer
   trigger rotation center recalculation — the transform list is
   left untouched.

2. Geometric attribute changes on elements with compound transforms
   (e.g. translate + rotate) compute the rotation center using only
   post-rotation transforms, preventing the translate from leaking
   into the center calculation.

3. ChangeElementCommand.apply/unapply preserve compound transform
   structure instead of replacing the entire transform attribute
   with just rotate(...).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add visual demo and screenshot for rotation recalculation bug

Includes an HTML demo showing both bugs side-by-side:
- Bug 1: Non-geometric attribute changes (stroke-width) on compound
  transforms corrupt character positions (e.g., word art on curves)
- Bug 2: Rotation center computed through ALL transforms instead of
  only post-rotation transforms, causing translate to leak into center

Each panel shows Original / Buggy / Fixed comparisons with the actual
SVG transform math applied. A Playwright script generates screenshots.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add sample SVG demonstrating compound transform corruption bug

A pinwheel of 6 colored rectangles using translate(200,200) rotate(N).
Loading this into SVG-Edit and changing stroke-width on the group
triggers the rotation recalculation bug on unfixed builds.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix standard linting: object properties on separate lines

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Centralize BBOX_AFFECTING_ATTRS and fix bbox-before-remove safety

Address two code review comments:

1. Export BBOX_AFFECTING_ATTRS from history.js and import it in undo.js
   so the attribute list is defined in one place.

2. Compute getBBox() before calling tlist.removeItem() so that a falsy
   bbox causes an early return/break without having already destroyed
   the rotation transform.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-15 22:28:53 +01:00

.github

Update CodeQL workflow to v4 and replace deprecated LGTM badges (#1079 )

2026-01-20 11:54:29 +01:00

README.md

SVGEdit

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

Contributions

SVGEdit is the most popular open source SVG editor. It was started more than 15 years ago by a fantastic team of developers. Unfortunately, the product was not maintained for quite a long time. We decided to give this tool a new life by refreshing many aspects.

Please let us know by creating an issue or a discussion if you wish to contribute.

I want to use SVGEdit

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

Prior to V7:

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

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

https://unpkg.com/svgedit@3.2.0/editor/svg-editor.html

I want to host SVGEdit in my environment

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

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

I want to contribute to SVGEdit

Thanks!

SVGEdit is made of two major components:

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

You should fork SVGEdit in your github environment and install SVGEdit locally as explained above.

Before you submit your PR, please make sure you run locally:

npm run lint to check that you follow the standardjs rules (https://standardjs.com/rules) for the linter
npm run test to run the Vitest suite (unit/locale checks)

If you intend to contribute on a regular basis, let us know so we can add you to the maintainer team.

I want to integrate SVGEdit into my own Web application

V7 is changing significantly the way to integrate and customize SVGEdit. You can have a look at index.html to see how you can insert a div element into your HTML code and inject the editor into the div.

Warning: This div can be positioned 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)

<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 positioned 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'))
  /* set the configuration */
  svgEditor.setConfig({
          allowInitialUserOverride: true,
          extensions: [],
          noDefaultExtensions: false,
          userExtensions: []
  })
  /* initialize the Editor */
  svgEditor.init()
</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

Development and Continuous Integration are done with a Chrome environment. Recent versions of Chrome, FireFox, and Safari are supported (in the meaning that we will try to fix bugs for these browsers).

To support old browsers, you may need 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 that the project team can decide if we should support it in the latest version of SVGEdit.

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']
        })

Hosting

SVGEdit versions are deployed to:

⇈ Back to Top