SVG Editor

Before asking any query, please read the documentation and Frequently Asked Questions!

An excellent easy but highly effective, user-friendly, browser-based SVG vector editor. Built with the newest net improvement techs: React.js and Fabric.js.

Provide your customers an easy-to-use drawing device. Or alternatively, it’s additionally an awesome place to begin to construct extra advanced issues, like Canva.

Editor Features

SVG Editor - 1

The intention was to maintain the enhancing expertise simple for the common person. It comprises solely the minimal, most elementary instruments which are crucial to attract nearly something.

Object settings: colour & gradient fill, border, alignment, transformations, picture results
Basic shapes included
Connectable strains and curves, free draw
15° jumps on rotation and line drawing (whereas holding Shift)
Textbox with font settings
File add by way of HTML5 File API, so we don’t want a server
Save picture as SVG, JPG or PNG
Basic shortcuts: arrow key, undo/redo, copy/paste
You also can paste a picture from the clipboard
Zoom (Ctrl +/-, Ctrl + mouse wheel)
Cross-browser help, shows a warning for previous browsers
Touch pleasant (examined on touchscreen pocket book)

Code Features

SVG Editor - 2

Built with the newest React options
Re-usable JS elements
Easy to translate: all texts are saved in a JSON file
Clean, commented code
Works in all trendy, main browsers
Easy to keep up and modify
Documentation

Changelog

v1.1.2 – April 12, 2023

- repair: after becoming canvas to content material, clicking obtain resets canvas to earlier measurement
- up to date recordsdata:
  - src/elements/CanvasSettings.js
  - src/elements/SelectionTextSettings.js

v1.1.1 – March 1, 2023

- repair: textbox situation, after typing we could not change font type on different textboxes
- repair: textbox total stylings are displayed correctly now on direct textbox swap
- repair: now you may copy paste textual content from/to textbox enhancing
- repair: overflow-y vertical scrollbar
- up to date recordsdata:
  - package deal.json
  - src/App.js, index.scss
  - src/elements/FabricCanvas.js, InputAmout.js, InputAmount.scss, ChoiceObjectSettings.js, SelectionSettings.js, SelectionTextSettings.js, ToolPanel.scss
  - src/utils/copyPaste.js, textBoxDrawing.js, usePrevious.js

v1.1.0 – October 18, 2022

- added a changelog
- base app replace, package deal updates, fastened a bunch of deprecated warnings
- app now helps newest LTS Node model (v16.17.1)
- up to date Fabric to newest 3.x.x model (v4 and v5 comprises breaking modifications, will probably be an even bigger replace later)
- up to date app render to React 18
- fastened SASS lint points
- repair: when solely part of a textual content was chosen, font measurement change did not work
- repair: CTRL + scroll zoom points
- repair: alignment instruments did not work nicely when zoomed in/out
- repair: downloaded picture measurement modified when zommed in/out
- repair: ungrouping simply grouped objects did not work
- repair: choice settings panel disappeared after ungrouping
- up to date recordsdata:
  - package deal.json
  - src/App.js, index.js
  - src/elements/Button.scss, FloatingMenu.js, GradientPicker.scss, InputRange.scss, SelectionAlignSettings.js, ChoiceObjectSettings.js, SelectionTextSettings.js
  - utils/saveInBrowser.js, zoom.js

v1.0.1 – June 29, 2020

- Fix: Shape part's title was untranslated
- Fix: after free draw deciding on the item produced an error
- Updated recordsdata: src/elements/Shapes.js, src/elements/SelectionColorSettings.js, src/languages/en.json

LIVE PREVIEW BUY FOR $49