top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

What is Vivus.js?

+1 vote
492 views

What is Vivus.js?

Vivus is a JavaScript library that gives your SVG the appearance of being drawn. Vivus works out of the box without a need for any dependencies (e.g. jQuery). Simply include the .js file in your HTML, and designate the SVG element you want to animate, along with some preset options to start the animation right away.
 
Vivus is a little JavaScript class to make drawing animation with SVGs in a webpage.
 
Types of animation
1)Delayed
2)Async
3)OneByOne
 
 
 
 
posted Sep 10, 2015 by anonymous

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

How to use vector image in HTML?

What is Vector Image?

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons—all of which are based on mathematical expressions—to represent images in computer graphics.
 
Vector graphics is the creation of digital images through a sequence of commands or mathematical statements that place lines and shapes in a given two-dimensional or three-dimensional space.
 
How to Create a Vector Image in Web Page?
 
Using SVG we can draw a vector image.Some of ways for using SVG in webpage.
 
1. Using an <object> Tag
 
<object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>

2. Using an <embed> Tag
<embed type="image/svg+xml" src="image.svg" />
3. Within an <iframe>
<iframe src="image.svg">Your browser does not support iframes</iframe>

4. Inline SVG XML Embedded Into Your HTML5 Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Embedded SVG</title>
</head>
<body>
<h1>Embedded SVG</h1>

<!-- SVG code -->
<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
	<text x="10" y="50" font-size="30">My SVG</text>
</svg>

</body>
</html>
5. Using an <img> Tag
<img src="image.svg" />
6. Using a CSS Background Image
#myelement
{
	background-image: url(image.svg);
}
 
 READ MORE
Importance of SVG and Canvas in HTML5?

In HTML , SVG and Canvas are two important graphics features.It is a Vector graphics technology.

What is Vector Graphics?

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons—all of which are based on mathematical expressions—to represent images in computer graphics.

Vector graphics range in complexity from simple to moderate to extremely complex. The following are some basic examples.

  1. Simple - Callout in a document or illustration.
  2. Moderate - Illustrations such as charts, diagrams and maps.
  3. Complex - Documents such as those used for engineering.

Canvas

Canvas is a bitmap with an immediate modegraphics application programming interface (API) for drawing on it. Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.

More Information about canvas - http://tech.queryhome.com/51054/about-html5-canvas

SVG

SVG is used to describe Scalable Vector Graphics

SVG is known as a retained mode graphics model persisting in an in-memory model. Analogous to HTML, SVG builds an object model of elements, attributes, and styles. When the element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree.

More Information about SVG - http://tech.queryhome.com/50869/about-svg-part-1

A Comparison of Canvas and SVG

Canvas

Pixel-based (canvas is essentially an image element with a drawing API)
Single HTML element similar to image in behavior
Visual presentation created and modified programmatically through script
Event model/user interaction is coarse -- at the canvas element only; interactions must be manually programmed from mouse coordinates
API does not support accessibility; markup-based techniques must be used in addition to canvas

SVG

Object Model-based (SVG elements are similar to HTML elements)
Multiple graphical elements which become part of the Document Object Model (DOM)
Visual presentation created with markup and modified by CSS or programmatically through script
Event model/user interaction is object-based at the level of primitive graphic elements -- lines, rectangles, paths
SVG markup and object model directly supports accessibility

Video Tutorial for svg and canvas

https://www.youtube.com/watch?v=_OiVBQY9hG0

Both Canvas and SVG are important components of the HTML5 graphically rich Web.Right now there are a lot of supporting libraries available on web for both svg and canvas. If I name a few Kinetics.js, Fabric.js, Raphael.js, Paper.js and many-many more. These libraries are there to make us work with these two technologies in an easy way.

Images for svg and canvas features

Image svg-canvas

 READ MORE
About SVG - Part 1

SVG stands for Scalable Vector Graphics.

SVG defines graphics in XML format. SVG is a platform for two-dimensional graphics.

SVG is an XML language, similar to XHTML, which can be used to draw graphics, such as the ones shown to the right.

It can be used to create an image either by specifying all the lines and shapes necessary, by modifying already existing raster images, or by a combination of both.

It has two parts:
1)XML-based file format and
2)A programming API for graphical applications.

Key features include shapes, text and embedded raster graphics, with many different painting styles.

It supports scripting through languages such as ECMAScript and has comprehensive support for animation.

SVG is used in many business areas including Web graphics, animation, user interfaces, graphics interchange, print and hardcopy output, mobile applications and high-quality design.

Simple Example:

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Output :
enter image description here

 READ MORE
...