SVG Editor }}

DISCOUNT! $79 $59! Get it while it’s cheap!

A super simple yet powerful, user-friendly, browser-based SVG vector editor. Built with the latest web development techs: React.js and Fabric.js.

Provide your users an easy-to-use drawing tool. Or alternatively, it’s also a great starting point to build more complex things, like Canva.

Editor Features

SVG Editor - 1

The aim was to keep the editing experience easy for the average user. It contains only the minimum, most basic tools that are necessary to draw almost anything.

  • Object settings: color & gradient fill, border, alignment, transformations, image effects
  • Basic shapes included
  • Connectable lines and curves, free draw
  • 15° jumps on rotation and line drawing (while holding Shift)
  • Textbox with font settings
  • File upload via HTML5 File API, so we don’t need a server
  • Save image as SVG, JPG or PNG
  • Basic shortcuts: arrow key, undo/redo, copy/paste
  • You can also paste an image from the clipboard
  • Zoom (Ctrl +/-, Ctrl + mouse wheel)
  • Cross-browser support, displays a warning for old browsers
  • Touch friendly (tested on touchscreen notebook)

Code Features

SVG Editor - 2

  • Built with the latest React features
  • Re-usable JS components
  • Easy to translate: all texts are stored in a JSON file
  • Clean, commented code
  • Works in all modern, major browsers
  • Easy to maintain and modify
  • Documentation

Changelog

v1.0.1 – June 29, 2020

- Fix: Shape component's title was untranslated
- Fix: after free draw selecting the object produced an error
- Updated files: src/components/Shapes.js, src/components/SelectionColorSettings.js, src/languages/en.json
Compatible Browsers Firefox Safari Opera Chrome Edge
Software Version ReactJS
Demo URL https://svgeditoronline.com/editor/
High Resolution Yes
Video Preview Resolution