Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

SVG Rectangle

Posted in SVG Tutorial
Updated on May 18, 2024
By Mari Selvan
👁️ 49 - Views
⏳ 4 mins
💬 1 Comment
SVG Rectangle

Photo Credit to CodeToFun

🙋 Introduction

In the world of Scalable Vector Graphics (SVG), rectangles are fundamental shapes that serve as building blocks for creating various graphics and visual elements. Understanding how to create and manipulate rectangles in SVG is essential for web developers and designers alike.

In this guide, we'll delve into the syntax, attributes, and usage of SVG rectangles.

💡 Syntax

The syntax for creating an SVG rectangle involves using the <rect> element, which is a self-contained tag that defines the rectangle's characteristics. Here's the basic structure:

index.html
Copied
Copy To Clipboard
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="80" fill="blue" stroke="black" stroke-width="2" />
</svg>

🧰 Attributes

  • x: Specifies the x-coordinate of the top-left corner of the rectangle.
  • y: Specifies the y-coordinate of the top-left corner of the rectangle.
  • width: Specifies the width of the rectangle.
  • height: Specifies the height of the rectangle.
  • Additional attributes like fill, stroke, and stroke-width can be used to style the rectangle.

📄 Example

Let's create a simple SVG rectangle:

index.html
Copied
Copy To Clipboard
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="80" fill="blue" stroke="black" stroke-width="2" />
</svg>

🧠 How it works?

In this example, we've defined a blue rectangle with a black border, positioned at (50, 50) with a width of 100 units and a height of 80 units.

🎉 Conclusion

SVG rectangles are versatile elements that form the backbone of many graphical designs on the web.

By understanding their syntax, attributes, and usage, you can effectively incorporate them into your projects to create visually appealing and interactive content.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy