top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration

Facebook Login
Site Registration

Importance of SVG and Canvas in HTML5?

+1 vote
730 views

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

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

posted Nov 7, 2014 by anonymous

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


Related Articles

HTML5 defines the element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”

A canvas is a rectangle in your page where you can use JavaScript to draw anything you want.

A element has no content and no border of its own.

The markup looks like this:

<canvas width="300" height="225"></canvas>

You can have more than one element on the same page.

Each canvas will show up in the DOM, and each canvas maintains its own state.

If you give each canvas an id attribute, you can access them just like any other element.

Example Code:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="background-color:#666;">
</canvas>

</body>
</html>

Output:
enter image description here

WHY DO YOU NEED CANVAS?

Canvas can be used to represent something visually in your browser.

For example:

  1. Simple diagrams
  2. Fancy user interfaces
  3. Animations
  4. Charts and graphs
  5. Embedded drawing applications
  6. Working around CSS limitations

Drawing tools

Rectangles
Arcs
Paths and line drawing
Bezier and quadratic curves

Effects

Fills and strokes
Shadows
Linear and radial gradients
Alpha transparency
Compositing

Transformations

Scaling
Rotation
Translation
Transformation matrix

READ MORE
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...