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 >