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

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

SVG Based Drawing Board, scribby Plugin/Github


See Demo And Download

Official Website(naknomum): Click Here

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

Related Posts

Create-HTML-Terminals

Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…

Slider-fg-carousel

An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….

Tags-Input-Component

A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…

copy-to-clipboard-javascript

A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…

free-angular-wysiwyg-editor

WYSIWYG Rich Text Editor For Angular Using ProseMirror

NgxEditor WYSIWYG¬†Rich Text Editor for Angular using ProseMirror. Based on the iconic font Ngx-Bootstrap and Font Awesome. ngx-editor is a simple rich text editor for Angular applications…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….