The best SVG rectangle Tutorial In 2024, In this tutorial you can learn
SVG Shapes,SVG rectangle - <rect>,Example 1,Examples,Example 2,Examples,Example 3,Examples,Example 4,Examples,
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:
Examples
<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 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:
Examples
<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 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:
Examples
<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 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:
Examples
<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 file (right-click on the preview source SVG graphics).
- rx and ry attributes can generate rounded rectangle.