Javascript Library for Scribbling On An SVG Element Plugin

Scribby is a JavaScript library that allows users to draw simple “scribbles” on a web page. To create a drawing application, developers can also draw seamless vector-based graphics in XML format using SVG.

Components Elements

The main functionality is in scribby.js, which deals with withdrawing on the Dom SVG element. Notey.js which presents a simple sticky note-like object on a webpage is also included as an example application using scribby.js. The utility functions are found in draggy.js and resty.js (but these are only required for the Notes app).

Objectives

  • SVG-based smooth/natural graphic
  • Simple/intuitive interface (nonexistent)
  • json representation
  • Convenience-based (experimental) local storage and persistence
  • Lightweight, no dependencies

Check Here – Makes it Easy to Draw on SVG Elements | SVG Pen Sketch

How to make use of it:

1. Download and insert scribby.js JavaScript into the document.

<script src="./lib/scribby.js"></script>

2. Create an SVG element for the drawing application.

<svg id="svgElement" style="background-color: #EFF;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" />

3. Configure the library on an SVG element to create a basic drawing application.

var board = new Scribby(document.getElementById("svgElement"));

4. It also provides a Notey method that allows you to create a Sticky Note with an SVG drawing functionality on the page.

<script src="./lib/draggy.js"></script>
<script src="./lib/notey.js"></script>
<script src="./lib/resty.js"></script>
var stickyNote = new Notey();
stickyNote.attachToBody();
stickyNote.save();

5. Undo/Reset/Reset the drawing application.

board.undo();
board.redo();
board.reset();

6. Set the properties of the SVG stroke border:

board.setAttrStroke('red');
board.setAttrStrokeWidth(3);

7. Export the SVG file as JSON data.

var data = board.toJson();

8. Create a new drawing app from the JSON data you provide.

var board2 = new Scribby(svgEl2, data);

Read More – A Convenient Analog Clock With JavaScript And SVG | Uptime

Future development

Possible features and improvements…. though these may go against the objective of simplified usage!

  • multi-touch & pressure support
  • better configuration via constructor
  • generalize (or plugin?) rest support
  • scaling / re-sizing
  • sharing (live), see also:
  • multi-user (as “layers”)

SVG Based Drawing Board, scribby Plugin/Github

Read More –¬†

Javascript Library for Making Simple SVG Graphs | oi.linechart.js
Manipulating and Animating SVG with Raw Javascript | SVG.js


See Demo And Download

Official Website(naknomum): Click Here

This superior jQuery/javascript plugin is developed by naknomum. For extra Advanced Usage, please go to the official website.

Share