HTML5 Shapes SVG
Drawing Shape
SVG stands for Scalable Vector Graphics and is used to draw shapes with HTML-style markup. It offers several methods for drawing paths, boxes, circles, text, and graphic images. It is not pixel-based, so it can be magnified infinitely with no loss of quality.
To draw shapes with SVG, you first need to create an SVG element tag with two attributes: width and height. To create a circle, add a circle tag. Some of its perimeters are:-
Circle tag explanation:-
- cx pushes the center of the circle further to the right of the screen
- cy pushes the center of the circle further down from the top of the screen
- r defines the radius
- fill determines the color of our circle
- stroke adds an outline to the circle
For your Information:-
To create a rectangle, we have to use rect tag. For eclipse, we have to use an ellipse tag and for polygon, we have to use a polygon tag.
Syntax:-
Its syntax is:- < svg >
Code Explanation
All Tutorials related to HTML Advance
HTML5
HTML5 Content Model
The header Tag
The footer Tag
The nav Tag
The article Tag
The section Tag
The aside Tag
The audio Tag
The video Tag
The Progress Bar
Web Storage
Geolocation API
Drag and Drop
HTML5 SVG
The Canvas Tag
HTML5 Forms
