# svg-edit/svgedit

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/svg-edit-svgedit).**

7,691 stars · 1,738 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/SVG-Edit/svgedit
- awesome-repositories: https://awesome-repositories.com/repository/svg-edit-svgedit.md

## Topics

`javascript` `svg` `svg-edit` `svg-editor`

## Description

SVGEdit is a browser-based SVG editor and canvas engine used for creating and modifying scalable vector graphics files. It provides a web interface for vector design and functions as an embeddable editor that can be injected into HTML elements within other web applications.

The project allows for the development of custom SVG tools and the construction of bespoke vector graphics editors by utilizing its standalone drawing engine.

## Tags

### Graphics & Multimedia

- [Vector Graphics Editors](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/vector-graphics-editors.md) — Provides a complete interface for creating and modifying scalable vector graphics files within the browser. ([source](https://github.com/svg-edit/svgedit#readme))
- [Browser-Based SVG Editors](https://awesome-repositories.com/f/graphics-multimedia/browser-based-svg-editors.md) — Provides a web interface for creating and modifying scalable vector graphics files directly in the browser.
- [Canvas Rendering Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/canvas-rendering-engines.md) — Implements a standalone drawing engine that provides a canvas for rendering and manipulating SVG elements.
- [SVG Tool Development Kits](https://awesome-repositories.com/f/graphics-multimedia/svg-tool-development-kits.md) — Provides a standalone drawing engine to enable the development of custom SVG tools.

### User Interface & Experience

- [Embedded SVG Editing](https://awesome-repositories.com/f/user-interface-experience/svg-integration/embedded-svg-editing.md) — Integrates a functional vector graphics editor into web applications to allow users to edit images in place.
- [Graphic Design Platforms](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-authoring-software/design-tools/graphic-design-platforms.md) — Functions as a browser-based platform for creating and exporting vector graphics and illustrations.
- [Vector Design Editors](https://awesome-repositories.com/f/user-interface-experience/vector-design-editors.md) — Provides a canvas-based tool for creating and manipulating vector design elements and layouts in the browser.
- [Embeddable Vector Editors](https://awesome-repositories.com/f/user-interface-experience/web-application-embeds/embeddable-vector-editors.md) — Provides a functional drawing interface that can be injected into HTML elements within other web applications. ([source](https://github.com/svg-edit/svgedit#readme))
- [Vector Editor Frameworks](https://awesome-repositories.com/f/user-interface-experience/editor-customization-tools/custom-editor-frameworks/vector-editor-frameworks.md) — Allows for the construction of bespoke vector graphics editors using a standalone canvas engine. ([source](https://github.com/svg-edit/svgedit#readme))

### Web Development

- [Browser-Based Drawing Applications](https://awesome-repositories.com/f/web-development/browser-based-drawing-applications.md) — Offers a drawing application that runs entirely in the browser for creating and modifying SVG files.
- [Embeddable Editor Integrations](https://awesome-repositories.com/f/web-development/embeddable-editor-integrations.md) — Offers a functional drawing interface that can be integrated into other web applications via JavaScript APIs.
- [Live SVG DOM Renderers](https://awesome-repositories.com/f/web-development/server-side-rendering/svg-renderers/live-svg-dom-renderers.md) — Uses the native browser DOM to treat SVG elements as a live scene graph for direct manipulation.
- [Event Listener Management](https://awesome-repositories.com/f/web-development/browser-integration-utilities/dom-event-handling/event-listener-management.md) — Manages drawing behaviors by dynamically attaching and detaching event listeners based on the active tool.

### Data & Databases

- [XML Serialization](https://awesome-repositories.com/f/data-databases/data-serialization-formats/xml-serialization-formats/xml-serialization.md) — Converts the live DOM tree of the drawing area into a standardized XML string for file saving.

### Software Engineering & Architecture

- [Command Patterns](https://awesome-repositories.com/f/software-engineering-architecture/command-patterns.md) — Implements a command-pattern undo system to track and reverse user actions on the vector canvas.
- [UI State Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-architectures/ui-state-synchronization.md) — Synchronizes the properties of selected SVG elements with a dynamic property panel using an observer mechanism.
- [Extensible Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/extensible-plugin-architectures.md) — Exposes a registry for adding custom tools and filters via an extensible plugin architecture.

### Part of an Awesome List

- [SVG Manipulation Tools](https://awesome-repositories.com/f/awesome-lists/devtools/svg-manipulation-tools.md) — Full-featured browser-based SVG editor.