SVG Scalable prepared by [email protected]

In this tutorial we are going to learn a new topic SVG. Today we will have some introduction on SVG and then try it practically in next tutorial.

. What is SVG?  Full form of SVG is “”.  SVG is used to define vector-based graphics on a web page.  Graphics in SVG are defined in XML(Extensive Markup Language).  Vector graphics do not lose any quality if zoomed in, stretched, scaled or resized.  Elements can be animated.  SVG is mostly used for vector type diagrams like Pie charts, two- dimensional graphs in an X, Y coordinate system etc. However, it can be used for other diagrams also.  Most of the web browsers can display SVG just like they can display PNG, GIF and JPG.

Basic tutorial | http://tutorials.jenkov.com/svg/index.html

What SVG can do? - http://jsphkhan.github.io/html5_svgmap/

- Download source code: https://github.com/jsphkhan/jsphkhan.github.io

1

SVG Scalable Vector Graphics prepared by [email protected]

One of the major benefits of SVG is that it is resolution-independent. Images can be scaled the same way we scale other elements in responsive web design. The image looks high-definition on any display – be it on high density display of your latest or low pixel density display of a standard desktop. So, on a where a JPG may appear blurry if it’s not large enough, SVG will still look crisp.

What is CanvasJS?

CanvasJS has a very simple API which lets you to add beautiful HTML5 Charts into your PHP application in minutes.

CanvasJS jQuery Charting Plugin lets you add interactive & responsive graphs to your web page with just a few lines of code. It also integrates easily with Bootstrap and other popular JavaScript Frameworks. | Link here

Angular Charts & Graphs for your Web Applications. Charts are Responsive & support animation, zooming, panning, events, exporting chart as image, drilldown & real-time updates | Link here

2