❤
npm
Sign UpSign In

vector.svg

1.5.0 • Public • Published

NPM version NPM total downloads License

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.

Contributing

Your PRs and stars are always welcome.

Please, try to follow:

  • Clone the repository.
  • Checkout develop branch.
  • 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

Documentation and Wiki

Readme

Keywords

Package Sidebar

Install

npm i vector.svg

Repository

github.com/rousan/vector.svg

Homepage

github.com/rousan/vector.svg#readme

Weekly Downloads

1

Version

1.5.0

License

MIT

Last publish

Collaborators

  • rousan
Try on RunKit
Report malware