Vector.svg
A lightweight Javascript library for creating Vector graphics and manipulating SVG.
Lightweight library for manipulating SVG.
Install
NPM
Install it from npm:
$ npm install --save vector.svg
CDN
If you prefer CDN, then just insert it into your HTML page:
<script src="https://cdn.jsdelivr.net/npm/vector.svg/dist/vector.svg.min.js"></script>
Demo
This is a simple Drawing Pad built with Vector.svg library.
Getting Started
First of all, create a HTML page consisting of a HTML element with an id attribute and ready to serve as the container of the drawing:
<!DOCTYPE html>
<html>
<head>
<title>Vector.svg Getting Started</title>
</head>
<body>
<div id="paper"></div>
</body>
</html>
Then, create a SVG Document within the container element:
var paper = Vector("paper", 400, 300);
Now, lets create some basic shapes:
var paper = Vector("paper", 400, 300);
var circle = paper.circle(50).cx(60).cy(60);
circle.attr("stroke", "red")
.attr("fill", "purple");
var rect = paper.rect(100, 100).x(100).y(100);
rect.attr("stroke", "purple")
.attr("fill", "green");
That’s it. Here is the JSFiddle link.