HTML5 SVG

The SVG supports 2D graphics through SVG (Scalable Vector Graphics). Prior to HTML5, SVG functioned based on XML, so it was only used in XHTML or with a separate SVG plug-in. Since HTML5, however, an svg tag is used in the XML format, and can be added as an inline element in HTML.

You can use the svg tag in HTML <body> element to create various SVG elements:

Images

For the images, define the image file, the image location on the screen, and the image size:

<svg xmlns="http://www.w3.org/2000/svg">
   <image xlink:href="http://developer.tizen.org/sites/all/themes/tizen_theme/logo.png" 
          x="10" y="10" width="224" height="74" />
</svg>

Text

For the text, define the textual content and the location on the screen:

<svg xmlns="http://www.w3.org/2000/svg">
   <text x="60" y="150">Hello World</text>
</svg>

Shapes
The following code snippet demonstrates how to retrieve shapes. For a complete source code, see svg_shape.html.

For the shapes, define the shape, size, location on the screen, line width, and the line and fill colors:
```
<svg xmlns="http://www.w3.org/2000/svg">
   <circle cx="150" cy="100" r="60" fill="blue" stroke="red" stroke-width="3" />
</svg>
```

You can manage multiple SVG element easily by grouping them together. You can also animate SVG elements and control them through scripting. For more information on using SVG, see Scalable Vector Graphics (SVG) Tiny 1.2 Specification.