vector.svg
v1.5.0
Published
A Javascript library for manipulating and animating SVG
Maintainers
rousanReadme
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.svgCDN
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.
Contributing
Your PRs and stars are always welcome.
Please, try to follow:
- Clone the repository.
- Checkout
developbranch. - Install dependencies.
- Add your new features or fixes.
- Build the project.
$ git clone https://github.com/rousan/vector.svg.git
$ cd vector.svg
$ git checkout develop
$ npm i
$ npm run build