SVG Rectangle

From http://www.w3schools.com (Copyright Refsnes Data)

# SVG <rect>

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

## SVG Shapes

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

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

The following chapters will explain each element, starting with the rect element.

## The <rect> Tag

The <rect> tag is used to create a rectangle and variations of a rectangle shape.

To understand how this works, copy the following code into Notepad and save the file as "rect1.svg". Place the file in your Web directory:

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg">

    <rect width="300" height="100"
    style="fill:rgb(0,0,255);stroke-width:1;
    stroke:rgb(0,0,0)"/>

    </svg>

Code explanation:

- The width and height attributes of the rect element define the height and the width of the rectangle
- The style attribute is used to define CSS properties
- The CSS fill property defines the fill color of the rectangle (either an rgb value, a color name, or a hexadecimal value)
- The CSS stroke-width property defines the width of the border of the rectangle
- The CSS stroke property defines the color of the border of the rectangle

View example

Let's look at another example that contains some new attributes:

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg">

    <rect x="20" y="20" width="250" height="250"
    style="fill:blue;stroke:pink;stroke-width:5;
    fill-opacity:0.1;stroke-opacity:0.9"/>

    </svg>

Code explanation:

- The x attribute defines the left position of the rectangle (e.g. x="0" places the rectangle 0 pixels from the left of the browser window)
- The y attribute defines the top position of the rectangle (e.g. y="0" places the rectangle 0 pixels from the top of the browser window)
- The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
- The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)

View example

Define the opacity for the whole element:

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg">

    <rect x="20" y="20" width="250" height="250"
    style="fill:blue;stroke:pink;stroke-width:5;
    opacity:0.9"/>

    </svg>

Code explanation:

- The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

View example

Last example, create a rectangle with rounded corners:

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg">

    <rect x="20" y="20" rx="20" ry="20" width="250"
    height="100" style="fill:red;stroke:black;
    stroke-width:5;opacity:0.5"/>

    </svg>

Code explanation:

- The rx and the ry attributes rounds the corners of the rectangle

View example

From http://www.w3schools.com (Copyright Refsnes Data)