Scalable vector graphics (SVG) in HTML5

[WoMeRa 56]

I have recently started studying about the HTML5. Now I am stuck at a point, and I am not knowing how to use Scalable vector graphics (SVG) in HTML5. So I thought to take some help from you members. Please explain me in details about using the HTML5. It would be grateful, if you explain me about SVG Basic and SVG Tiny. Also I want to know that which browser supports SVG formats described in HTML5? I hope that you members will explain me about it in details. I am looking for some quick responses. Thanks for taking out your time.

[afidelino]

You should be knowing that many HTML5 features are implemented in the web browser. The new features can be divided roughly into four areas:

• Forms of presentation: web designer to get through new or more powerful tags like <video> <canvas> and more options such as more interactive and complex graphics.
• Data processing: Without the Internet connection can be web pages do not display current time. With new tools for data processing, Web sites change from frame to display content for the pure stand-alone applications, the data cache and then display, then no need to even connect to the Internet.
• Other extras: Services to locate and presentations are just two examples of many small improvements in the specification still does not show up until now the official HTML5.
• Fix old mistakes: Each browser handles HTML source code so far different. HTML5 is to resolve these differences and ensure a uniform image.

[Fragman]

The SVG format (Scalable Vector Graphics) was developed to precisely the same purpose - plain ASCII text into graphic shapes to implement. Since 1999, various technical committees working on the format and now they turn onto the finishing straight. After Microsoft also supports the IE9 SVG, finally all major browsers. The SVG format is to bring the same kind of precision in the description of graphic elements, as it ensures PostScript for printing templates. Instead of describing objects through the specification of individual pixels, the whole thing is made out of lines and shapes that are defined by using tags. To it, the following example is a circle with a radius of 40 pixels:

<circle cx="150" cy="70" r="50" stroke="purple"stroke-width="2" fill="red">

Because the browser adjusts the objects, the screen resolution and can increase the user as needed and reduce the result is always good. Movies and games, which are animated based schemes are, thanks to the vector technique saves space and quickly - with Gzip compression is the source evaporated again by up to 80 percent.

[T0tal L0$$]

Several developers are also experimenting with a more flexible standard vector. Thus, the <animate> tag was developed, describing a path to move the objects themselves along. After a job has been created from the code that converts the SVG engine from a new position and draw the graph at this point again. According to the will of some other special effects such as SVG-color filter and limits any piece of HTML can be entered. Such a team, the Mozilla developers the HTML5 draft vector effects for the subset of HTML CSS (Cascading Style Sheets) submitted. The Firefox fixes this proposal is already good at - other browsers, however, are still very error prone at this point. But this is not surprising, but the Firefox makers have both the code and the specifications for the integration nominally designed simultaneously.

[Gefry]

According to the will of some other special effects such as SVG-color filter and limits any piece of HTML can be entered......

A third area of distinction in which the browser is still the integration of SVG-based writings. Unlike PostScript, it can be the default version of SVG is not putting any stroke is converted into a graphic symbol, respectively a part of a letter. Only the WebKit browser can use the already provided, because they support the basics of SVG fonts; IE have to be adjusted yet. Although vector graphics "razor sharp" are some users prefer to have something - artistically challenging - blurred. Blur filters that allow it to be offered by Chrome, Opera and Firefox.

[Aanand]

With this fast SVG Test check your browser if it is able in embedded SVG to process tags. A successful combination of SVG examples and browser testing shows the different ways that are still in the experimental phase to date. Refer to the below table, what current browsers which support SVG formats described in HTML5:

[justinepeter]

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.
SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.
HTML5 allows embeding SVG directly using <svg>...</svg> tag which has following simple syntax:
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>

[justinepeter]

You can enable HTML5 in Firefox 3.7 using the following steps:
1. Type about:config in your Firefox address bar.
2. Click the "I'll be careful, I promise!" button on the warning message that appears (and make sure you adhere to it!).
3. Type html5.enable into the filter bar at the top of the page.
4. Currently it would be disabled, so click it to toggle the value to true.