SVG rectangle

SVG Shapes

SVG has some predefined shape elements, can be used by developers to use and operate:

• Rectangle <rect>
• Round <circle>
• Oval <ellipse>
• Line <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>

The following sections will explain to you these elements, starting from a rectangular element.

SVG rectangle - <rect>

Example 1

<Rect> tag is used to create a rectangle, and a rectangular variant:

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Code analysis:

• width and height attributes rect elements define the height and width of the rectangle
• style property is used to define CSS properties
• CSS fill property defines the rectangle fill color (rgb values, color name or hexadecimal value)
• Width of stroke-width CSS property defines the rectangular border
• The stroke color CSS property defines the rectangular border

Example 2

Let's look at another example, it contains a number of new properties:

Here is the SVG code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Code analysis:

• X attribute defines the left position of the rectangle (for example, x = "0" to define the rectangle to the left side of the browser window, the distance is 0px)
• Top position y attribute defines the rectangle (for example, y = "0" from the definition of the rectangle to the top of the browser window is 0px)
• CSS's fill-opacity property defines the transparency of the fill color (legal range: 0--1)
• The CSS stroke-opacity property defines the transparency of the stroke color (legal range: 0--1)

Example 3

Define the opacity of the entire element:

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

• CSS opacity property defines the value of the transparent element (range: 0-1).

Example 4

The last example, create a rounded rectangle:

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

• rx and ry attributes can generate rounded rectangle.