SVG include some tags within HTML5 document

SVG include some tags within HTML5 document HTML5 allows user to add SVG graphics directly into the webpage. The root element <svg> sets the width and height of the finished graphics in pixels. The element <title> provides title to the document and is displayed on top of browser tab. The element <desc> provides complete description about the image

SVG Elements

SVG Elements <line> element <rect> element <circle> element <ellipse> element <polygon> element <text> element <path> element <pattern> element <lineargradient> element <radialgradient> element <filter> element

SVG LINE: ‹ line › element

The svg <line> element is used to draw line. Where the (X1, X2) Coordinates specifies the starting point and (X3, X4) Coordinates specifies the end point of line. Here is a simple example of SVG Line element.   Code Output      

 SVG Rectangle: ‹ rect › element

The SVG <rect> element is used to draw rectangles. The attributes width and height represents the width and height of the rectangle while <fill> represents the fill color. Here is a simple example of SVG Rectangle element.   Code     Output  

SVG Circle: < circle > element

The SVG <circle> element is used to draw circles. The attributes (cx, cy) represents the coordinates of the center, while attribute “r” represents the radius of the circle. Here is a simple example of SVG Rectangle element.  Code Output    

SVG Ellipse: < ellipse > element

The SVG <ellipse> element is used to draw ellipse. The attributes (cx, cy) represents the co-ordinates of centre, while attribute “rx” and “ry” represents the radius along X axis and Y axis respectively. Here is a simple example of SVG ellipse element.  Code  Output    

SVG Polygon: < polygon > element

The SVG <polygon> element is used to draw a polygon of various sizes. The attributes (x, y) represents the coordinates of each vertex of the polygon and each co-ordinate(X, Y) are separated by a white space. Here is a simple example of SVG polygon element.  Code Output    

SVG Text: < text > element

The SVG <text> element is used to display text, in Vectors. The attributes (x, y) represents the starting coordinates of the text. Here is a simple example of SVG Text element.   Code            Output    

SVG Linear Gradient: < lineargradient > element

SVG Linear Gradient: < lineargradient > element The SVG <lineargradient> element is used to represents the linear gradient to be used as fill .The attributes (x1, y1) and (x2, y2) represents the start and end points of the gradient. The attributes offset andstopcolor represents the color at each offset point. Here is a simple example of SVG Linear Gradient element. Code Fig17   Output   Fig18

SVG Radial Gradient: < radialgradient > element

 SVG Radial Gradient: < radialgradient > element The SVG <radialgradient> element represent the radial color gradient, which can be used as a fill. The Radial Gradients consists two circles over which color patterns are created :Start Circle and End Circle. The attributes (cx, cy) and “r” represents the End Circle and (fx, fy) represents the Start Circle. Here is a simple example of SVG radialgradient element. Code   Fig19 …

SVG Radial Gradient: < radialgradient > element Read More »

What is the Canvas API In HTML5? HTML5 Tutorial

The <Canvas> element is the most important element introduced by HTML5. It creates a 2d Canvas API (Application Programming Interface) using JavaScript. The <canvas> element is only a container for graphics which is used to draw graphics, on the fly, via scripting. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. The default size of the canvas is 300 x 150(width * length) but …

What is the Canvas API In HTML5? HTML5 Tutorial Read More »

Canvas Lines

Canvas Lines There is a process of drawing lines on a Canvas bitmap which is more similar to that on a normal paper. Process 1. Start with a beginPath() Function and denote the start of a new path. 2. Then Call the drawing cursor to the starting point of the subpath using moveTo(x,y) Function. 3. Then draw a straight …

Canvas Lines Read More »

Drawing Rectangle

Drawing Rectangle In HTML5, almost all complex shapes on canvas are drawn by calling path method, and drawing it line by line. But rectangles can be drawn in one simple step. There are 3 different ways in which a user can draw a Canvas Rectangle in html5. Unfilled Rectangle:strokeRect(x, y, w, h) To create a Simple …

Drawing Rectangle Read More »

Drawing Curves

There are two types of curves in HTML5 named as: Bezier Curves Quadratic Curves Drawing Bezier Curves To draw a Bezier Curve on the canvas use bezierCurveTo (cx1, cy1, cx2, cy2, x, y) method. Here, (cx1, cy1) and (cx2, cy2) represents the two control points. (x, y) represents the point to which the curve is to be created. The start of …

Drawing Curves Read More »

Drawing Arcs

Drawing Arcs In HTML5, Arcs can be drawn using two types of methods Arc() Method ArcTo() Method Draw Arc using Arc() Method To draw an arc on the canvas using arc(x, y, radius, startAngle, endAngle, direction) method. Here, (x, y) represents the centre of the arc. radius represents the radius of the arc. startAngle represents the angle where …

Drawing Arcs Read More »

Drawing Text

Drawing Text To draw a Text on a Canvas a user can use number of methods to make it attractive. All the methods are discussed below. Let us discuss the Method used in Text Drawing on a Canvas Text Drawing Methods There are 3 types of methods which are used in Text Drawing:- FillText StrokeText …

Drawing Text Read More »

Scroll to Top