SVG Rectangle

SVG : Drawing Rectangles

Predefined SVG Shapes

SVG provides several predefined shape elements for ease of use. These include:

• Rectangle: <rect>
• Circle: <circle>
• Ellipse: <ellipse>
• Line: <line>
• Polyline: <polyline>
• Polygon: <polygon>
• Path: <path> (for more complex shapes)

This chapter focuses on the <rect> element.

The SVG Element

Example 1: Basic Rectangle

The <rect> element creates rectangles. You define its position, size, and appearance.

A blue rectangle with a black border.

SVG Code:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:blue; stroke-width:3; stroke:black;" />
</svg>

Core Attributes & Styling:

• width: The width of the rectangle.
• height: The height of the rectangle.
• style: Used here for inline CSS properties. Alternatively, use presentation attributes (e.g., fill="blue") or external CSS.
• fill: (CSS property) Defines the fill color of the rectangle.
• stroke-width: (CSS property) Defines the width of the rectangle’s border.
• stroke: (CSS property) Defines the color of the rectangle’s border.

Note: By default, if x and y are not specified, the rectangle’s top-left corner is at (0,0).

Example 2: Positioning and Opacity

Controlling position and transparency:

A semi-transparent blue rectangle with a semi-transparent pink border, offset from the top-left.

SVG Code:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
        style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.3; stroke-opacity:0.7;" />
</svg>

Additional Attributes & Styling:

• x: The x-coordinate of the rectangle’s top-left corner.
• y: The y-coordinate of the rectangle’s top-left corner.
• fill-opacity: (CSS property) Defines the opacity of the fill color (0.0 to 1.0).
• stroke-opacity: (CSS property) Defines the opacity of the stroke color (0.0 to 1.0).

Example 3: Overall Element Opacity

Setting opacity for the entire element:

A semi-transparent rectangle (both fill and stroke affected equally) with blue fill and pink stroke.

SVG Code:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
        style="fill:blue; stroke:pink; stroke-width:5; opacity:0.5;" />
</svg>

Code Explanation:

• opacity: (CSS property) Defines the opacity for the entire element, including its fill and stroke (0.0 to 1.0).

Example 4: Rounded Corners

Creating rectangles with rounded corners:

A semi-transparent red rectangle with a black border and rounded corners.

SVG Code:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150" rx="20" ry="20"
        style="fill:red; stroke:black; stroke-width:5; opacity:0.5;" />
</svg>

Rounding Attributes:

• rx: The x-axis radius of the ellipse used to round the corners.
• ry: The y-axis radius of the ellipse used to round the corners. If ry is not specified, it defaults to the value of rx.

Practical Applications:

Rectangles are versatile: use them for backgrounds, buttons, bar charts, layout containers, and any design requiring rectangular shapes, optionally with rounded corners. For accessibility, consider adding <title> and <desc> elements if the rectangle conveys meaning.