Hello, world!

HTML 5 SVG HTML

HTML SVG defines how the 2D graphics and graphical applications are built in the HTML tutorial. It allows you to build SVG rectangle, circle, ellipse, polyline, polygon, line as well as gradients.



HTML5 – SVG

SVG is the acronym  for Scalable Vector Graphics. It is a language that define 2D graphics and graphical applications. SVG  is a W3C recommended and allows you to build vector type graphics such as pie charts, 2-dimensional graphs.

Embedding SVG in HTML5

You can apply the HTML 5 <svg>...</svg> tag to embed SVG files:

Syntax embedding svg in html5:

<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>

Configuration option ("about:config") launched by Firefox 3.7 allows you to execute HTML5 using these four(4) steps:
1. First in your Firefox address bar, type about:config and enter.
2. Then Firefox will display a warning message with the "I'll be careful, I promise!" button, just click it and make sure you comply with it!
3. Refine your search by filtering, just type html5.enable into the filter bar that you can find at the top of the page.
4. Then it will show you the file and would presently disable it. You can change the value to true by simply clicking the file.
You can now try out some examples since your Firefox HTML5 program is now ready and enabled.

Viewing SVG Files

You can view SVG files on some browsers just like viewing a usual image file.
In order view SVG files in Internet Explorer, users may need to install the Adobe SVG Viewer plugin.

HTML5 − SVG Rectangle

Applying the <rect> tag in HTML5 version allows you to build or draw a rectangle in SVG format.

HTML code example html5 − svg rectangle:

<h2>How to create HTML5 SVG Rectangle</h2>                    
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="200" height="100" fill="blue" />
</svg>

HTML output html5 − svg rectangle:

How to create HTML5 SVG Rectangle



HTML5 − SVG Circle

The <circle> tag in HTML5  version allows you to build or draw a circle in SVG format.

HTML code example html5 − svg circle:

<h2>How to create HTML5 SVG Circle</h2>                       
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="40" r="40" fill="blue" />
</svg>

HTML output html5 − svg circle:

How to create HTML5 SVG Circle



HTML5 − SVG Ellipse

Applying the <ellipse> tag in HTML5 version allows you to build or draw a ellipse in SVG format.

HTML code example html5 − svg ellipse:

<h2>How to create HTML5 SVG Ellipse</h2>                        
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="80" cy="40" rx="80" ry="40" fill="blue" />
</svg>

HTML output html5 − svg ellipse:

How to create HTML5 SVG Ellipse



HTML5 − SVG Polyline

Applying the <polyline> tag in HTML5 version allows you to build or draw a polyline in SVG format.

HTML code example html5 − svg polyline:

<h2>How to create HTML5 SVG Polyline</h2>                    
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,30 30,30 30,50 50,50 50,80" fill="blue" />
</svg>

HTML output html5 − svg polyline:

How to create HTML5 SVG Polyline



HTML5 − SVG Polygon

Applying the <polygon> tag in HTML5 version allows you to build or draw a polygon in SVG format.

HTML code example html5 − svg polygon:

<h2>How to create HTML5 SVG Polygon</h2>                
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon  points="20,10 300,20, 170,60" fill="blue" />
</svg>

HTML output html5 − svg polygon:

How to create HTML5 SVG Polygon



HTML5 − SVG Line

Applying the <line> tag in HTML5 version allows you to build or draw a line in SVG format.

HTML code example html5 − svg line:

<h2>How to create HTML5 SVG Line</h2>                
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="150" style="stroke:blue;stroke-width:2"/>
</svg>

HTML output html5 − svg line:

How to create HTML5 SVG Line



You can set extra style information such as the colors and size of the stroke by using the style attribute.

HTML5 − SVG Gradients

Applying the <ellipse> tag in HTML5 version allows you to build or draw a ellipse in SVG format.
You can apply the<radialGradient> tag to put an SVG radial gradient.
You can apply use <linearGradient> tag to produce  SVG linear gradient.

HTML code example html5 − svg polyline:

<body>            
<h2>How to create HTML5 SVG Gradient Ellipse</h2>                        
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">                        
<defs>                                   
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
       <stop offset="0%" style="stop-color:rgb(100,100,100); stop-opacity:0"/>
       <stop offset="100%" style="stop-color:rgb(0,255,255); stop-opacity:1"/>
    </radialGradient>                                                
</defs>                            
     <ellipse cx="120" cy="60" rx="120" ry="60" style="fill:url(#gradient)" />                                    
</svg>

HTML output html5 − svg polyline:

How to create HTML5 SVG Gradient Ellipse