1.5. SVG <rect>

1.5.1. SVG Shapes ¶

SVG has some predefined shape elements that can be used and manipulated by developers:

Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Broken line polyline>
Polygon <polygon>
Path <path>

The following sections will explain these elements, starting with rectangular elements.

1.5.2. SVG rectangle-<rect> ¶

Example 1 ¶

<rect> tags can be used to create rectangles, as well as variants of rectangles:

Here is the SVG code:

Example

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

     

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

Code parsing:

rect of the element width and height property defines the height and width of the rectangle
style Property is used to define the CSS property
CSS’s fill property defines the fill color of the rectangle (rgb value, color name, or hexadecimal value)
CSS’s stroke-width property defines the width of the rectangular border
CSS’s stroke property defines the color of the rectangular border

1.5.3. Example 2 ¶

Let’s look at another example, which contains some new properties:

Example

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>
</svg>

    

For Opera users: view SVG files

Code parsing:

The x attribute defines the left position of the rectangle (for example, x = “0” defines that the distance from the rectangle to the left side of the browser window is 0px)
The y attribute defines the top position of the rectangle (for example, y = “0” defines that the distance from the rectangle to the top of the browserwindow is 0px)
CSS’s fill-opacity property defines the fill color transparency (the legal range is: 0-1)
CSS’s stroke-opacity property defines the transparency of the outline color (the legal range is: 0-1)

1.5.4. Example 3 ¶

Define the opacity of the entire element:

Here is the SVG code:

Example

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>

    

For Opera users: view SVG files

The CSS opacity attribute is used to define the transparency value of the element (range: 0 to 1).

1.5.5. Example 4 ¶

For the last example, create a rounded rectangle:

Here is the SVG code:

Example

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

    

For Opera users: view SVG files

rx and ry property to fillet the rectangle.