SVG <rect>
SVG Shapes
SVG has some predefined shape elements that can be used 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.
SVG Rectangle - <rect>
The <rect>
element is used to create a rectangle and variations of a rectangle shape.
The <rect>
element has six basic attributes to position and shape the
rectangle:
Attribute | Description |
---|---|
width | Required. The width of the rectangle |
height | Required. The height of the rectangle |
x | The x-position for the top-left corner of the rectangle |
y | The y-position for the top-left corner of the rectangle |
rx | The x radius of the corners of the rectangle (used to round the corners). Default is 0 |
ry | The y radius of the corners of the rectangle (used to round the corners). Default is 0 |
An SVG Rectangle
This example creates a rectangle with the six basic attributes and a fill color:
Here is the SVG code:
Example
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
<rect
width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
</svg>
Try it Yourself »
Code explanation:
- The
width
andheight
attributes of the<rect>
element define the height and the width of the rectangle - The
x
andy
attributes defines the x- and y-position of the top-left corner of the rectangle (x="10" places the rectangle 10px from the left margin and y="10" places the rectangle 10px from the top margin) in the SVG canvas - The
rx
andry
attributes defines the radius of the corners of the rectangle - The
fill
attribute defines the fill color of the rectangle
A Rectangle With Border
Let's look at another example that contains some new attributes:
Here is the SVG code:
Example
<svg width="320" height="130" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
x="10" y="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:red" />
</svg>
Try it Yourself »
Code explanation:
- The
style
attribute is used to define CSS properties for the rectangle - The CSS
fill
property defines the fill color of the rectangle - 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
A Rectangle With Opacity
Let's look at another example that contains some new attributes:
Here is the SVG code:
Example
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="150" x="10" y="10"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
Try it Yourself »
Code explanation:
- 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)
Another Rectangle With Opacity
Define the opacity for the whole element:
Here is the SVG code:
Example
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="150" x="10" y="10"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
Try it Yourself »
Code explanation:
- The CSS
opacity
property defines the opacity value for the whole element (legal range: 0 to 1)
A Rectangle With Rounded Corners
Last example, create a rectangle with rounded corners:
Here is the SVG code:
Example
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
<rect width="150"
height="150" x="10" y="10" rx="20" ry="20"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Try it Yourself »
Code explanation:
- The
rx
and thery
attributes rounds the corners of the rectangle