1.1.4 • Published 3 months ago

simple-svg-edit v1.1.4

Weekly downloads
6
License
MIT
Repository
github
Last release
3 months ago

Simple SVG editor

Simple SVG editor - move, scale, rotate elements and text edit.

DEMO

Usage

If you are using build system, include the functionality you need from folder features, and start edit svg:

import {Editor} from 'simple-svg-edit/features/editor';
import 'simple-svg-edit/features/default-helper';
import 'simple-svg-edit/features/text';
import 'simple-svg-edit/features/default-text-helper';

let editor = new Editor(document.querySelector('svg'));

Some functionality requires to use styles (include sass or dist/css):

@import '~simple-svg-edit/features/default-helper';

Or just use ready compiled files from folder dist:

<!DOCTYPE html>
<html>
  <head>
    <link href="../dist/simple-svg-editor.css" rel="stylesheet">
  </head>
  <body>
    <div class="root">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- svg here--></svg>
    </div>
    <script src="../dist/simple-svg-editor.js"></script>
    <script>new SimpleSvgEditor(document.querySelector('svg'));</script>
  </body>
</html>

Features

  • editor - main functionality editor class;
  • default-helper - provide build-in element control helper;
  • text - allow to edit text;
  • default-text-helper - provide build-in text control helper;
  • text-align - allow to change text-align editable <text>;
  • text-operations - allow to change style of selected text in WYSIWYG text editor;
  • align - align objects relative another;
  • transform-helper - provide transormation methods;
  • insert-image - provide insert image methods;
  • insert-text - provide insert text methods;
  • bottom-widget - provide build-in insert control widget;
  • history - undo/redo;

Documentation

Read documentation

1.1.4

3 months ago

1.1.3

1 year ago

1.1.1

3 years ago

1.1.2

3 years ago

1.1.0

3 years ago

1.0.0

3 years ago