# HTML5 - SVG Tutorial

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.

SVG became a W3C Recommendation 14. January 2003 and you can check latest version of SVG specification at SVG Specification.

## Viewing SVG Files:

Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. Internet Explorer users may have to install the Adobe SVG Viewer to be able to view SVG in the browser.

## Embeding SVG in HTML5

HTML5 allows embeding SVG directly using <svg>...</svg> tag which has following simple syntax:

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

Firefox 3.7 has also introduced a configuration option ("about:config") where you can enable HTML5 using the following steps:

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.

Now your Firefox HTML5 parser should now be enabled and you should be able to experiment with the following examples.

## HTML5 - SVG Circle

Following is the HTML5 version of an SVG example which would draw a cricle using <circle> tag:

```<!DOCTYPE html>
<title>SVG</title>
<meta charset="utf-8" />
<body>
<h2>HTML5 SVG Circle</h2>  <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">      <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />  </svg>
</body>
</html>```

## HTML5 - SVG Rectangle

Following is the HTML5 version of an SVG example which would draw a rectangle using <rect> tag:

`<!DOCTYPE html>  <head>  <title>SVG</title>  <meta charset="utf-8" />  </head>  <body>  <h2>HTML5 SVG Rectangle</h2>  <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">      <rect id="redrect" width="300" height="100" fill="red" />  </svg>  </body>  </html>  `

## HTML5 - SVG Line

Following is the HTML5 version of an SVG example which would draw a line using <line> tag:

`<!DOCTYPE html>  <head>  <title>SVG</title>  <meta charset="utf-8" />  </head>  <body>  <h2>HTML5 SVG Line</h2>  <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">      <line x1="0" y1="0" x2="200" y2="100"            style="stroke:red;stroke-width:2"/>  </svg>  </body>  </html>  `

You can use style attribute which allows you to set additional style information like stroke and fill colors, width of the stroke etc.

## HTML5 - SVG Ellipse

Following is the HTML5 version of an SVG example which would draw an ellipse using <ellipse> tag:

`<!DOCTYPE html>  <head>  <title>SVG</title>  <meta charset="utf-8" />  </head>  <body>  <h2>HTML5 SVG Ellipse</h2>  <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">      <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />  </svg>  </body>  </html>  `

## HTML5 - SVG Polygon

Following is the HTML5 version of an SVG example which would draw a polygon using <polygon> tag:

`<!DOCTYPE html>  <head>  <title>SVG</title>  <meta charset="utf-8" />  </head>  <body>  <h2>HTML5 SVG Polygon</h2>  <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">      <polygon  points="20,10 300,20, 170,50" fill="red" />  </svg>  </body>  </html>  `

## HTML5 - SVG Polyline

Following is the HTML5 version of an SVG example which would draw a polyline using <polyline> tag:

`<!DOCTYPE html>  <head>  <title>SVG</title>  <meta charset="utf-8" />  </head>  <body>  <h2>HTML5 SVG Polyline</h2>  <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">   <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />  </svg>  </body>  </html>  `

Following is the HTML5 version of an SVG example which would draw a ellipse using <ellipse> tag and would use <radialGradient> tag to define an SVG radial gradient.

Similar way you can use <linearGradient> tag to create SVG linear gradient.

`<!DOCTYPE html>  <head>  <title>SVG</title>  <meta charset="utf-8" />  </head>  <body>  <h2>HTML5 SVG Gradient Ellipse</h2>  <svg id="svgelem" height="200" xmlns="https://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(200,200,200);        stop-opacity:0"/>        <stop offset="100%" style="stop-color:rgb(0,0,255);        stop-opacity:1"/>        </radialGradient>     </defs>     <ellipse cx="100" cy="50" rx="100" ry="50"         style="fill:url(#gradient)" />  </svg>  </body>  </html>  `

** Bebas disunting dengan menyebutkan sumber **

#### Halaman Terkait

• HTML5 allows for MathML elements
The HTML syntax of HTML5 allows for MathML elements to be used inside a document using $...$ tags. Most of the web browsers can display MathML tags. If your browser does not support MathML, then I would suggest you to use latest version o
• Simple While Loop Example
Repetive tasks are always a burden to us. Deleting spam email, sealing 50 envelopes, and going to work are all examples of tasks that are repeated. The nice thing about programming is that you can avoid such repitive tasks with a little bit of extra
• Complete HTML5 Tags Reference
A complete list of standard tags available in HTML5 is given below. All the tags are ordered alphabetically along with an indication if they have been introduced newly or they have been deprecated in HTML5.
• HTML5 Deprecated Tags and Attributes
The following elements are not available in HTML5 anymore and their function is better handled by CSS:
• HTML5 - Color Names
The following table shows 16 color names that were introduced in HTML 3.2 to support 16 colors that 8-bit graphics cards offered: