Explain SVG Tags in HTML?

Programming Language
,
#1

SVG is the full form of Scalable Vector Graphics, it defines a container for SVG graphics. SVG has several methods of drawing like paths, boxes, circles, text, and graphic images. **<svg></svg>**

  • Circle: for circle, we need to concentrate on three attributes i.e., cx, cy rcx and cy are the x and y coordinates of center of the circle and their default value is 0. R is the radius of the circle.

<circle cx= “a” cy= “b” r= “c”/> ( self-closing tag )

  • Rectangle: for rectangle we have attributes x, y, w, h, rx, ry, x and y are the coordinates of the top left corner of the rectangle and their default value is 0. W is the width of the rectangle and h is the height. Rx and ry are used to round the corner of the rectangle. Style is used to style the inline styles that we saw in the previous video. Class attribute is used to specify an external style name to the element.

<rect x= “a” y= “b” width = “c” height =”d”/>

You can use the stroke and fill attribute to add colors to the outline and inside of the shape.