Well, when we have to render graphics on our web page we might be using Flash or some raw images.
With HTML 5 all such hard stuff is not necessary instead we are allowed to use Canvas and SVG to render graphics on the webpages.
The best to time to decide what to be used is the initial stage of the development and that decision would bring up in the project. Now, to take the decision we should be aware of some basic differences between Canvas and SVG. Below are some basic differences here.
HTML 5 may bring chances for many web developers to adopt the current sites to it. So, read some HTML 5 stuff and get ready for the battle…..
With HTML 5 all such hard stuff is not necessary instead we are allowed to use Canvas and SVG to render graphics on the webpages.
The best to time to decide what to be used is the initial stage of the development and that decision would bring up in the project. Now, to take the decision we should be aware of some basic differences between Canvas and SVG. Below are some basic differences here.
Canvas | SVG |
---|---|
Canvas is just a HTML DOM element that has an unique drawing context which allows to render graphics on it | SVG is Scaleable vector graphics format in which all the parts on the graphics would be HTML DOM Elements. |
The Graphics rendered over the canvas are typically a series of pixels drawn in a particular order to render the desired shapes and structures | The Graphics rendered using SVG are actually a series of vectors where each vector is drawn as a series of lines in predefined shapes and structures. |
The initial canvas can’t have something drawn on it except the CSS styles used to render the canvas element itself. all the drawings are considered to be drawn dynamically using Javascript. however, some open source javascript libraries would make it easier to do the job | Here the graphics rendered are actually the XML Nodes inside the HTML DOM of the current page. in other words the elements are directly written along with the normal HTML tags. |
we are responsible for what ever drawn on the canvas and the browser doesn’t hold any references for it once the graphic is drawn. | we can access these graphics just as like the other HTML elements using the id’s and name’s to modify them dynamically further. |
Resolution dependent. when we need to render some special graphics and fit them in the user’s screen resolution, there is no luck to get it done with canvas. This is because we must have to specify where the pixels should be drawn manually in Javascript |
Resolution independent as like the other HTML elements the SVG elements are managed to be drawn perfectly based on the CSS styles assigned to then i.e., if we are good at CSS we should have no problem while using these. |
The best one for the Game Developers. For those developers who have been developing the games in CoreGraphics,OpenGL,C etc, they can directly start using them on canvas and just learning Javascript to a little extent is enough. | Well these are not really intended for the Graphics development applications like Games, instead these elements are intended for reduction of the image and graphic work being done by the web developers and also to give the ability make the sophisticated websites in short span of time. |
The only way to include SVG elements in Canvas is to overlap them with css zindex property and positioning then in the right place | As the SVG Elements are just DOM Elements we can always have Canvas as a part of the SVG such that some platform specific things can be dynamically drawn. |
Canvas is bit back in rendering the texts perfectly. Mostly these texts are not perfectly drawn unless we set a shadow for it. | These elements just use the browsers inbuilt text rendering capabilities and perfectly responds to the CSS styles set on them |
Best for report generation. till now most web developers use to generate images dynamically in server into a temporary folder and link them into the pages to give the ability to view the reports in pie charts,histograms etc. This is no longer needed if we are planning to develop a HTML 5 website and ultimately the server’s performance is going to be bit higher. | Not suitable for report generation but a bit back in doing that in easy way. |
Some times it seems these graphics are not being printed to the paper perfectly because the actual screen size and paper size were differing | No issues while printing them to paper as the browser does it’s work to bring all the elements into the paper’s scope |
HTML 5 may bring chances for many web developers to adopt the current sites to it. So, read some HTML 5 stuff and get ready for the battle…..