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:
<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:
<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:
Author
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
If you have any doubts regarding this article (SVG Rectangle), please comment here. I will help you immediately.