SVG Based Drawing Board – scribby.js

Category: Javascript | November 30, 2021
Views Total:702 views
Official Page:Go to website
Last Update:November 30, 2021


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="" xmlns: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();

5. Undo/Redo/Reset the drawing app.


6. Set the SVG stroke properties:


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);



  • Tweaks

You Might Be Interested In:

Leave a Reply