PHPackages svg-edit/svgedit - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. svg-edit/svgedit AbandonedLibrary[Utility & Helpers](/categories/utility) svg-edit/svgedit ================ SVG-edit is a fast, web-based, javascript-driven SVG drawing editor that works in any modern browser. v7.2.0(3y ago)7.6k871.7k[36 issues](https://github.com/SVG-Edit/svgedit/issues)[1 PRs](https://github.com/SVG-Edit/svgedit/pulls)MITJavaScriptCI passing Since May 13Pushed 1mo ago218 watchersCompare [ Source](https://github.com/SVG-Edit/svgedit)[ Packagist](https://packagist.org/packages/svg-edit/svgedit)[ Docs](https://github.com/SVG-Edit/svgedit/tree/master)[ GitHub Sponsors](https://github.com/OptimistikSAS)[ GitHub Sponsors](https://github.com/brettz9)[ RSS](/packages/svg-edit-svgedit/feed)WikiDiscussions master Synced 2mo ago READMEChangelog (10)DependenciesVersions (35)Used By (0) [![](https://camo.githubusercontent.com/69fe0c07439f3025e4e2bc7d6a56ddd8313d18874873662c50f30ed9bf254044/68747470733a2f2f7376672d656469742e6769746875622e696f2f737667656469742f7372632f656469746f722f696d616765732f6c6f676f2e737667)](https://camo.githubusercontent.com/69fe0c07439f3025e4e2bc7d6a56ddd8313d18874873662c50f30ed9bf254044/68747470733a2f2f7376672d656469742e6769746875622e696f2f737667656469742f7372632f656469746f722f696d616765732f6c6f676f2e737667) SVGEdit ======= [](#svgedit) [![npm](https://camo.githubusercontent.com/bd588c14e6d7ddd6881c22fad0ca73f07bf92d961b5b5214be48836a7162857a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f737667656469742e737667)](https://www.npmjs.com/package/svgedit)[![Actions Status](https://github.com/SVG-Edit/svgedit/workflows/Node%20CI/badge.svg)](https://github.com/SVG-Edit/svgedit/actions)[![Known Vulnerabilities](https://camo.githubusercontent.com/f2d3ea6ac713741edfe00835388c97fc9b2a55de09ba536bb3df0e9e12273e23/68747470733a2f2f736e796b2e696f2f746573742f6769746875622f5356472d456469742f737667656469742f62616467652e737667)](https://snyk.io/test/github/SVG-Edit/svgedit)[![CodeQL](https://github.com/SVG-Edit/svgedit/actions/workflows/codeql.yml/badge.svg)](https://github.com/SVG-Edit/svgedit/actions/workflows/codeql.yml) **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](docs/screenshot.png)](docs/screenshot.png)[](https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg) Contributions ------------- [](#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 --------------------- [](#i-want-to-use-svgedit) Thanks to **Netlify**, you can access the following builds from your favorite browser: - [Try SVGEdit V7 (master branch on github)](https://svgedit.netlify.app/index.html) - [Try SVGEdit V7 (latest published version on npm)](https://unpkg.com/svgedit@latest/dist/editor/index.html) ### Prior to V7: [](#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. - [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 - I want to host SVGEdit in my environment ---------------------------------------- [](#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/svgcanvas` to 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 ------------------------------- [](#i-want-to-contribute-to-svgedit) **Thanks!** SVGEdit is made of two major components: 1. The "svgcanvas" that takes care of the underlying svg editor. 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 SVGEdit locally 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 () for the linter 2. `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 ------------------------------------------------------- [](#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)** ``` /* You need to call the Editor and load it in the */ 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() ``` I want to build my own svg editor --------------------------------- [](#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 ------------------ [](#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 ------------------------------- [](#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 ------------------------------------ [](#further-reading-and-more-information) - Participate in [discussions](https://github.com/SVG-Edit/svgedit/discussions) - See [AUTHORS](AUTHORS) file for authors. - [StackOverflow](https://stackoverflow.com/tags/svg-edit) group. Hosting ------- [](#hosting) SVGEdit versions are deployed to: [![Deploys by Netlify](https://camo.githubusercontent.com/39c8c3a854cbbb14ace4f8b68a6e2b6193bd09bb11011854dd8ae00b82397f39/68747470733a2f2f7777772e6e65746c6966792e636f6d2f696d672f676c6f62616c2f6261646765732f6e65746c6966792d636f6c6f722d616363656e742e737667)](https://www.netlify.com) --- [⇈ Back to Top](#svgedit) ### Health Score 57 — FairBetter than 98% of packages Maintenance62 Regular maintenance activity Popularity44 Moderate usage in the ecosystem Community40 Growing community involvement Maturity74 Established project with proven stability Bus Factor3 3 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~81 days Recently: every ~335 days Total 20 Last Release 1364d ago Major Versions v3.2.0 → v4.0.02018-11-16 v4.3.0 → v5.0.02019-05-07 v5.1.0 → v7.2.02022-08-14 ### Community Maintainers ![](https://www.gravatar.com/avatar/2ab8e6dfdca1e0fd7c30361c5a524b840c9b821751bcd6603365df997ae262a1?d=identicon)[montefuscolo](/maintainers/montefuscolo) --- Top Contributors [![codedread](https://avatars.githubusercontent.com/u/100364?v=4)](https://github.com/codedread "codedread (752 commits)")[![Fyrd](https://avatars.githubusercontent.com/u/432336?v=4)](https://github.com/Fyrd "Fyrd (663 commits)")[![jfhenon](https://avatars.githubusercontent.com/u/20402845?v=4)](https://github.com/jfhenon "jfhenon (609 commits)")[![brettz9](https://avatars.githubusercontent.com/u/20234?v=4)](https://github.com/brettz9 "brettz9 (571 commits)")[![AgriyaDev5](https://avatars.githubusercontent.com/u/44435283?v=4)](https://github.com/AgriyaDev5 "AgriyaDev5 (335 commits)")[![prusnak](https://avatars.githubusercontent.com/u/42201?v=4)](https://github.com/prusnak "prusnak (113 commits)")[![Delapouite](https://avatars.githubusercontent.com/u/39315?v=4)](https://github.com/Delapouite "Delapouite (66 commits)")[![StalderT](https://avatars.githubusercontent.com/u/13799456?v=4)](https://github.com/StalderT "StalderT (57 commits)")[![cuixiping](https://avatars.githubusercontent.com/u/1104492?v=4)](https://github.com/cuixiping "cuixiping (41 commits)")[![progers](https://avatars.githubusercontent.com/u/569214?v=4)](https://github.com/progers "progers (29 commits)")[![antimatter15](https://avatars.githubusercontent.com/u/30054?v=4)](https://github.com/antimatter15 "antimatter15 (27 commits)")[![vidarh](https://avatars.githubusercontent.com/u/50907?v=4)](https://github.com/vidarh "vidarh (24 commits)")[![adrianbj](https://avatars.githubusercontent.com/u/871211?v=4)](https://github.com/adrianbj "adrianbj (23 commits)")[![mathieucura](https://avatars.githubusercontent.com/u/16381627?v=4)](https://github.com/mathieucura "mathieucura (22 commits)")[![flintobrien](https://avatars.githubusercontent.com/u/297997?v=4)](https://github.com/flintobrien "flintobrien (21 commits)")[![iuyiuy](https://avatars.githubusercontent.com/u/15262070?v=4)](https://github.com/iuyiuy "iuyiuy (20 commits)")[![asyazwan](https://avatars.githubusercontent.com/u/236578?v=4)](https://github.com/asyazwan "asyazwan (14 commits)")[![magnebra](https://avatars.githubusercontent.com/u/17291622?v=4)](https://github.com/magnebra "magnebra (12 commits)")[![methodofaction](https://avatars.githubusercontent.com/u/51445?v=4)](https://github.com/methodofaction "methodofaction (11 commits)")[![ibrierley](https://avatars.githubusercontent.com/u/3901173?v=4)](https://github.com/ibrierley "ibrierley (9 commits)") --- Tags javascriptsvgsvg-editsvg-editordrawingsvgeditorsvg-edit ### Embed Badge ![Health badge](/badges/svg-edit-svgedit/health.svg) ``` [![Health](https://phpackages.com/badges/svg-edit-svgedit/health.svg)](https://phpackages.com/packages/svg-edit-svgedit) ``` ### Alternatives [components/flag-icon-css A curated collection of all country flags in SVG — plus the CSS for easier integration. 12.0k1.6M23](/packages/components-flag-icon-css)[twbs/bootstrap-icons Official open source SVG icon library for Bootstrap 7.9k2.0M56](/packages/twbs-bootstrap-icons)[simple-icons/simple-icons SVG icons for popular brands 24.8k194.2k4](/packages/simple-icons-simple-icons)[rinvex/countries Rinvex Countries is a simple and lightweight package for retrieving country details with flexibility. A whole bunch of data including name, demonym, capital, iso codes, dialling codes, geo data, currencies, flags, emoji, and other attributes for all 250 countries worldwide at your fingertips. 1.7k7.4M48](/packages/rinvex-countries)[froala/wysiwyg-editor A beautiful jQuery WYSIWYG HTML rich text editor. High performance and modern design make it easy to use for developers and loved by users. 5.4k306.9k3](/packages/froala-wysiwyg-editor)[kartik-v/bootstrap-star-rating A simple yet powerful JQuery star rating plugin for Bootstrap. 1.1k4.5M5](/packages/kartik-v-bootstrap-star-rating) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)