SVG Based Drawing Board – scribby.js

There’re lots of canvas-based drawing libraries on the web, such as Signature Pad and PortrayCanvas.

To create a drawing app, developers are also able to draw smooth, vector-based graphics in XML format using SVG.

scribby.js is a tiny JavaScript SVG drawing library that allows you to draw any graphic (like a signature) on an SVG element and export it as JSON or base64/SVG/PNG image.

Thanks to the HTML web storage API, the library persistences what you have drawn in the local using HTML5 local storage.

How to use it:

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

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

2. Create an SVG element for the drawing app.

<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. Initialize the library on the SVG element to create a basic drawing app.

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

4. It also provides a Notey method that allows you to create a Sticky Note with the 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/Redo/Reset the drawing app.

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

6. Set the SVG stroke properties:

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

7. Export the SVG 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);

Changelog:

11/30/2021

• Tweaks