js-svg-client

v2024.9.8

Published

2 months ago

Client Side SVG using JavaScript

Downloads

0High
0Medium
0Low

manthanwar

scalable vector graphics svg javascript js

JS-SVG-Client

Amit M. Manthanwar 30 August 2024

Client Side JavaScript for Creating Scalable Vector Graphics

GitHub repo size

Introduction

This package contains a library of JavaScript codes for data visualization (data viz) using Scalable Vector Graphics (SVG) elements. Data viz deals with the graphic representations of information, data, or knowledge intended to communicate and improve cognition about information derived from variety of data sources quickly, clearly and effectively via visual or graphical means. This visualization library is one of the many available on the web to help understand complex ideas, patterns and trends hidden in the data to derive meaningful insights for informed data-driven decision making.

This library is written in pure JavaScript and SVG without any other dependencies. This use of native browser technologies is the main advantage of this library which can run on any server or client machine including any mobile device without internet to render results on a browser locally from a local filesystem or with internet by deploying it on a web server.

Using this library you can make elegant, lightweight, super-fast, fully customizable and interactive user interfaces, vector graphics, and artworks for your data rich websites/commercial/academic/research projects using appropriate license. This library is intuitive, interactive and easy to use. It supports many data types and chart types including ability to export output results in PDF, PNG, JPG, SVG or EPS file formats as well as ability to export input data to CSV, XLS, or HTML table formats.

Feel free to ask questions, post issues, submit pull request, and request new features.

For more information about this project and how to use this package, please check out our detailed documentation.

Quick Start

Example 1: Draw A Basic Circle

In this example, we add q div tag inside the document body. Next, we add a svg tag inside the div. Finally, we draw the circle inside the svg. See the following HTML and JavaScript codes on how to achieve this.

index.html

<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Page Title</title>
  <link rel="shortcut icon" href="#" />
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script type="module" src="basic-circle.js"></script>
 </head>
 <body></body>
</html>

basic-circle.js

import * as mySvg from './svg.min.js';

window.onload = (event) => {
 createDiv();
 createSvg();
 createCircle();
};

function createDiv() {
 var data = {
  containerId: 'body',
  id: 'svgDiv'
 };
 var svgDiv = new mySvg.Div(data);
}

function createSvg() {
 var data = {
  containerId: 'svgDiv',
  id: 'svgMain',
  width: 200,
  height: 200,
  style: 'border: 2px solid red'
 };
 var svgMain = new mySvg.Svg(data);
}

function createCircle() {
 var data = {
  containerId: 'svgMain',
  id: 'circle',
  cx: 100,
  cy: 100,
  r: 50,
  stroke: 'blue',
  strokeWidth: 10,
  fill: 'pink'
 };
 var circle = new mySvg.Circle(data);
}

Example 2: Draw the Incircle and the Circumcircle of a Triangle

Here the objective is to draw the inner and outer circles of a triangle given the three vertices of a triangle. In this example, we first add <div> tag inside the html document body. In the div we add the main <svg>. In the main svg, we add the 10 x 10 grid to easily visualize the drawing process. Finally, we draw the triangle and corresponding inner and outer circles. The three coordinates of the vertices of triangle are specified using the grid values as percentage of the width of the svg element. See the following HTML and JavaScript files to understand the coding process how we can achieve this. The JavaScript file also contains various other example functions.

Documentation

To check out the detailed documentation, visit

License

Please check the Software Licenses for details.

Repository

This GitHub repository of package is located at

https://github.com/manthanwar/JS-SVG-Client.git

Changelog

Please check the Releases page of this project.

Code Languages

All codes are implemented in JS, CSS, HTML

Contribution Guidelines

Read our Contribution Guidelines before you contribute.

Supporting this project

This project is released under the Source License. Its ongoing development is made possible thanks to the support by these awesome sponsors. You can help make this project better by reporting issues and supporting us at Patreon or Bye Me a Coffee. Thank you!