crus4

crus4

SVG Rectangle with Text


Table of Contents

The <rect> element is used to create a Rectangle.

In an example below let’s create a rectangle by writing a code.

Example

<!DOCTYPE html>
<html>
<head>
  <title> SVG Rectangle </title> 
</head> 
<body>
<svg width="400" height="110">
  <rect width="300" height="100" style="fill:powderblue;stroke-width:3;stroke:black" />
</svg>
</body>
</html>

Attributes Used in the Code

SVG Rectangle Rounded Corners

To draw a rectangle with rounded corners we copy the same code that we have write in an above example. But to make the corners rounded we will write some extra attributes.

Below in an example let’s write a code to create a rectangle with rounded corners.

Example

<!DOCTYPE html>
<html>
<head>
  <title>SVG Rectangle Rounded Corners</title>
</head>
<body>
<svg width="400" height="200">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:green;stroke:black;stroke-width:5;" />
</svg>
</body>
</html>

The attributes rx and ry is used to round the corners of the rectangle.

SVG Rectangle With Text

Now let’s draw a rectangle with text. Here we will add two elements inside the SVG element, <rect> element and <text> element. The <text> element is used to draw rectangle with text.

In an example below, let’s write a code to draw rectangle with text.

Example

<!DOCTYPE html>
<html>
<head>
  <title>SVG Rectangle with Text</title>
   <body>
    <svg height="300" width="300">
      <rect x="20" y="20" width="300" height="100" fill="powderblue"/>
      <text x="70" y="70" fill="blue" font-weight="bold">SVG Rectangle With Text</text>
    </svg>
  </body>
</html>

Inside the <text> element we have write x and y attributes. These attributes define the x and y coordinate of the text.


Related Posts

SVG Circle

SVG Drawing Ellipse

Add SVG to HTML

SVG Rectangle with Text – crus4