Graphics in HTML 5
This article is in continousation of previous article, here we will try to understand two features of HTML 5
No Need of Plugins
Graphics in HTML 5
- Scalable Vector Graphics (SVG)
HTML 5 Canvas
- helps the browser to draw shapes and images without any plugin.
- is used to draw graphics, on the fly, via scripting.
- has several methods for drawing paths, boxes, circles, characters and adding images.
Scalable Vector Graphics (SVG)
A <svg> element is used to create the scalable vector graphics. The Scalable Vector Graphics (SVG) is an XML-based image format that is used to define two-dimensional vector based graphics for the web. Unlike raster image (e.g. .jpg, .gif, .png, etc.), a vector image can be scaled up or down to any extent without losing the image quality.
An SVG image is drawn out using a series of statements that follow the XML schema — that means SVG images can be created and edited with any text editor, such as Notepad. There are several other advantages of using SVG over other image formats like JPEG, GIF, PNG, etc.
- SVG images can be searched, indexed, scripted, and compressed.
- SVG images can be printed with high quality at any resolution.
- SVG content can be animated using the built-in animation elements.
- SVG images can contain hyperlinks to other documents.
<html> <head> <title> Content Editable </title> </head> <body> <svg width="500" height="500"> <polygon points="100,10 40, 180 190,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> <circle cx="200" cy="200" r="40" stroke="green" storke-width="4" fill="yellow" /> <rect x="250" y="250" width="100" height="100" style="fill:green;stroke:red;stroke-width:4;" /> </svg> </body> </html>
In next post we will try to understand the video and audio in html 5.
Difference between SVG & Canvas
|Less Animation||More Animation|
|High Level Graphics||Low Level Graphics|
|Mouse Interactions||Keyboard Interactions|
|Easy UIS||JS Centric|
|Tree of Objects (XML)||Pixels|