HTML

HTML Intro

HTML Intro Quiz

HTML Intro Exercise

HTML Basics

HTML Basic Quiz

HTML Basic Exercise

HTML Advance

HTML Advance Quiz

HTML Advance Exercise

HTML Tags List

HTML Global Attributes

HTML Attributes

FAQs

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

All Sections related to HTML