SVG Scalable Vector Graphics 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 “Scalable Vector Graphics”. 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 pixel density display of your latest smartphone or low pixel density display of a standard desktop. So, on a retina display 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