Course Content

  • How to create basic shapes in SVG

Course Content


  • The height and width of the rectangle are determined by the width and height attributes of the rect> element.
  • The rectangle's CSS characteristics are defined by the style attribute.
  • The rectangle's fill colour is determined by the CSS fill attribute.
  • The CSS stroke-width attribute specifies the width of the rectangle's border.
  • The CSS stroke attribute determines the colour of the rectangle's border.a

Path. The most general shape that can be utilised in SVG is a route. You can draw rectangles (with or without rounded corners), circles, ellipses, polylines, and polygons with a path element. Bezier curves, quadratic curves, and many others are examples of different sorts of shapes.

In HTML, you may utilise the rect element inside the svg element to make a square.

The rect> element is a basic SVG shape that draws rectangles with positions, widths, and heights defined.

To draw a hexagon, use the svg> element with the polygon> element. We need to provide the x,y coordinates for 6 angles in order to draw a hexagon. Sets the colour of hexagon's environment. The colour of the hexagon stroke is specified.

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download LearnVern App

App Preview Image
App QR Code Image
Code Scan or Download the app
Google Play Store
Apple App Store
598K+ Downloads
App Download Section Circle 1
4.57 Avg. Ratings
App Download Section Circle 2
15K+ Reviews
App Download Section Circle 3
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere