Skip to content

AmKreta/svgEditor

Repository files navigation

React Svg Editor

Follow me on linkedin for more interesting projects

Click here to visit site

Demo

Watch the video

About

  • React Svg Editor is a powerful design tool that helps you to create anything: websites, applications, logos, and much more.
  • Built for Web, React Svg Editor helps you create, share, test, and ship better designs from start to finish.
  • Whether it’s consolidating tools, simplifying workflows, or collaborating across teams and time zones, React Svg Editor makes the design process faster, more efficient, and fun while keeping everyone on the same page.

Features

  • Multiple tools provided to design layouts.
  • Gradient creator provided to create and use beautiful gradients within the project.
  • Theming made easy, select and save colours in palettes and use them throughout in the project, didn't liked a color, change it, it will automatically be applied to all the elements in which it was used.
  • Tool like clipart search, illustration search also provided.
  • Transform shapes easily, manipulate various properties like height, width, border color, background color etc.
  • over 8 css filters available.
  • Divide large projects into small parts , design them in separate pages of a project.
  • Export your project as svg or json.
  • Improt the json file again
  • Effects like outline , box-shadow also available.
  • Everything is saved locally , don't need internet to work
  • Pointer helpers are also provided to help place your shape in a perfect position.

How To Use

  • click on create new file on header
  • select tool
  • click on canvas to add shape
  • the sidebar on right contains all the properties, manipulate them from there.
  • for multipoints shapes like line, polygon, path use right click to end the path.
  • press ctrl key and drag the shape to scale.
  • press shift key and drag the shape to rotate.
  • Click on file then on pages to add more pages.
  • Click on file and then on save to save your project.
  • Click on gradient , gradient creation tool will open up for you.
  • Click on color , to add colors to palette.
  • Click on Insert, clipart search tool will open up for you.