SVG Rectangle

Posted in SVG Tutorial

Updated on May 18, 2024

By Mari Selvan

👁️ 39 - Views

⏳ 4 mins

💬 1 Comment

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

<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

<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.