LIVE PREVIEWBUY FOR $49

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

An excellent easy but highly effective, user-friendly, browser-based SVG vector editor. Constructed with the most recent net growth techs: React.js and Material.js.

Present your customers an easy-to-use drawing instrument. Or alternatively, it’s additionally a terrific start line to construct extra advanced issues, like Canva.

Editor Options

SVG Editor - 1

The intention was to maintain the enhancing expertise simple for the typical consumer. It accommodates solely the minimal, most simple instruments which can be needed to attract virtually something.

  • Object settings: coloration & gradient fill, border, alignment, transformations, picture results
  • Primary 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
  • Primary shortcuts: arrow key, undo/redo, copy/paste
  • You too can paste a picture from the clipboard
  • Zoom (Ctrl +/-, Ctrl + mouse wheel)
  • Cross-browser help, shows a warning for previous browsers
  • Contact pleasant (examined on touchscreen pocket book)

Code Options

SVG Editor - 2

  • Constructed with the most recent React options
  • Re-usable JS parts
  • Simple to translate: all texts are saved in a JSON file
  • Clear, commented code
  • Works in all fashionable, main browsers
  • Simple to take care of and modify
  • Documentation

Changelog

v1.1.2 – April 12, 2023

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

v1.1.1 – March 1, 2023

- repair: textbox subject, after typing we could not change font model on different textboxes
- repair: textbox total stylings are displayed correctly now on direct textbox change
- repair: now you'll be able to copy paste textual content from/to textbox enhancing
- repair: overflow-y vertical scrollbar
- up to date recordsdata:
  - bundle.json
  - src/App.js, index.scss
  - src/parts/FabricCanvas.js, InputAmout.js, InputAmount.scss, SelectionObjectSettings.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, bundle updates, mounted a bunch of deprecated warnings
- app now helps newest LTS Node model (v16.17.1)
- up to date Material to newest 3.x.x model (v4 and v5 accommodates breaking modifications, will probably be a much bigger replace later)
- up to date app render to React 18
- mounted SASS lint points
- repair: when solely part of a textual content was chosen, font dimension change did not work
- repair: CTRL + scroll zoom points
- repair: alignment instruments did not work effectively when zoomed in/out
- repair: downloaded picture dimension modified when zommed in/out
- repair: ungrouping simply grouped objects did not work
- repair: choice settings panel disappeared after ungrouping
- up to date recordsdata:
  - bundle.json
  - src/App.js, index.js
  - src/parts/Button.scss, FloatingMenu.js, GradientPicker.scss, InputRange.scss, SelectionAlignSettings.js, SelectionObjectSettings.js, SelectionTextSettings.js
  - utils/saveInBrowser.js, zoom.js

v1.0.1 – June 29, 2020

- Repair: Form part's title was untranslated
- Repair: after free draw deciding on the item produced an error
- Up to date recordsdata: src/parts/Shapes.js, src/parts/SelectionColorSettings.js, src/languages/en.json


Source