Hypertext Markup Language
- HTML - INTRODUCTION
- HTML - EDITORS
- HTML - BASIC
- HTML - ATTRIBUTE
- HTML - STYLE
- HTML - CHARSET
- HTML - FILEPATH
- HTML - IFRAME
- HTML - SYMBOL
- HTML - FORMS
- HTML - RESPONSIVE
- HTML - MEDIA
- HTML - Graphics
- HTML - Colors
- HTML - URL
- HTML - Plug Ins
- HTML - Semantic Markup
- HTML - Input Types
- HTML - Input Attributes
- HTML - CCE
- HTML - Tables
- HTML - CSS
- HTML - IMAGE
- HTML - Formating
- HTML - Headings
- HTML - Elements
- HTML - HTML5 SE
- HTML - HTML5
- HTML - xhtml
- HTML - HTML and HTML5
- HTML - APIs
- HTML - Classes
- HTML - Dom
- HTML - Entities
- HTML - BI Elements
- HTML - Head
- HTML - Lists
In HTML, vector graphics is supported using various technologies such as Silver light, Flash etc.
HTML5 supports vector graphics with two in-built elements. These are:
Let’s move further with some information about HTML Canvas and HTML SVG.
This HTML5 element allows you to draw graphics on a web page.
It has various methods to draw paths, boxes, circles, text and even to add images.
It is always used with the id, width and height attributes.
width - This attribute is used to define the width of the canvas.
height - This attribute is used to define the height of the canvas.
You can have more than one <canvas> element in one HTML page.
HTML Canvas is used:
● To draw colorful text, with or without animation
● To draw graphical data representation, like graphs and charts.
● To draw simple to complex animations
● To develop HTML gaming applications
● To respond to various user actions, such as clicks on keyboard, mouse, button and a movement of a finger
By default, this element has no border and content. But, you can add a border to the canvas using a style attribute.
var canvas = document.getElementById(“samplecanvas”)
Other things you should know about Canvas
● The view of a canvas completely depends on resolution, which means in each resolution it looks in some different way.
● This element does not support event handlers.
● This element is not so good for text rendering.
● The resulting image can be saved as .png or .jpg
● It is suitable for graphic-intensive games.
SVG stands for Scalable Vector Graphics and is used to define vector-based graphics in XML format. Each element and each attribute in SVG files can be animated.
SVG graphics provides high quality whether the images are zoomed or resized, the resolution quality remains the same.
It is basically used for vector type diagrams, such as bar charts, 2D-graphics, graphical applications etc.
<svg width="10" height="100">
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
Benefits of using SVG
Here, you will get to know some benefits of using SVG as compared to other image formats, such as jpeg, gif and others.
● You can create and edit SVG images with any text editor.
● It is easy to search, index, script and compress SVG images.
● Such images are scalable
● Such images are zoomable
● These images can be printed with high quality despite of any resolution
● SVG files are wholesome XML