Dhananjay Khairnar @. Powered by Blogger.

8 July 2016

How to create SVG graph on HTML page without D3.js :

What is SVG: 

                        SVG has been in development since 1999 by a group of companies within the W3C after the competing standards Precision Graphics Markup Language (PGML, developed from Adobe's PostScript) and Vector Markup Language (VML, developed from Microsoft's RTF) were submitted to W3C in 1998. SVG drew on experience from the designs of both those formats.

                            SVG allows three types of graphic objects: vector graphics, raster graphics, and text. Graphical objects, including PNG and JPEG raster images, can be grouped, styled, transformed, and composited into previously rendered objects. SVG does not directly support z-indices that separate drawing order from document order for overlapping objects, unlike some other vector markup languages like VML. Text can be in any XML namespace suitable to the application, which enhances search ability and accessibility of the SVG graphics. The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects, and extensibility.

                            Since 2001, the SVG specification has been updated to version 1.1. The SVG Mobile Recommendation introduced two simplified profiles of SVG 1.1, SVG Basic and SVG Tiny, meant for devices with reduced computational and display capabilities. An enhanced version of SVG Tiny, called SVG Tiny 1.2, later became an autonomous Recommendation.

                             Work is currently in progress on SVG 2, which incorporates several new features in addition to those of SVG 1.1 and SVG Tiny 1.2.
in above example first image is jpeg drawn image. if we zoom it we see pixels like square box and hence the quality of image after zoom is not so good but  SVG image is drawn using vector coordinates as we  zoom it we seen that their is no pixels because it is made of sharp lines and curve that having starting point and end point and curves are made up of equations. 
              so the use of SVG image reduse memory of webpage and also increase quality of image.

Example of SVG image in webpage:


Step 1 : Create text file and change its extention to “svgtest.html”

Step 2 : Now open that file and copy past below html code

Step 3 : Open this file in Firefox or any other browser that support SVG

Step 4 : For change grid size you have to change in following parameter


About DK

Hi, My Name is DK. I am a embedded system designer and embedded programmer. I am a certified holder of Diploma in Embedded system designing. We have a team of professinal programmers, developers work together and implement innovative concepts.


Post a Comment