-

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

 




Comments

Post a Comment

Popular posts from this blog

-
Image
JHD12864E interfacing with Arduino Uno( 128x64 Bit MAp Graphics LCD) :   Requirement : 1 ) JHD12864E LCD 2 ) Arduino 3 ) Connecting wires Aim: Convert and display JPEG image on Graphics LCD as Bitmap image Step 1 :  Download and put Glcd library in Documents/Arduino/library folder GLCD library Step 2 : Download BMP-To-LCD software to convert JPEG image to BMP array BMP-TO-LCD Step 3:   Make connection of LCD to Arduino UNO as shown in figure.   Step 4:  Download any image from internet.   Step 5: Open image in Paint   Step 6:   Step7 :       Step 8:   Step 9:  Click on resize without selecting area Step 10:  Save image as 1.bmp   Step 11 : open Image in BMP-LCD software And click on Genarate code Copy that genarated code in Arduino sketch   Step 12: Copy Paste code in bitmaps.h with some modification as shown in below image   Main sketch is as shown below image   
Read more
-
Image
Program ESP8266 WiFi module with Arduino IDE: The Arduino IDE software (short for Integrated Development Environment) is the foundation of what has made the Arduino platform so successful. With it, Makers can program a wide range of compatible microcontroller boards using Arduino’s relatively approachable programming language. Behind the scenes, the IDE software translates your instructions into a more complex code required for your board’s specific chip. Aside from generally cleaning up a number of known bugs, the new update introduces a number of new tools and features. One of the useful feature is board manager which allow use to add customized and diffrent board support in Arduino IDE. In this tutorial we are going to add ESP8266 board in Arduino IDE and program it without and programmer simple using RX, TX pin. Required : 1) ESP8266 2) Arduino UNO 3)connecting wires 4) Local wifi router Step 1 : For buy ESP8266 module here amezon link is given Buy ES
Read more