Creating A Rectangle In Javascript Svg

36 How To Draw Rectangle In Javascript Modern Javascript Blog

SVG stands for Scalable Vector Graphics. It is a 2-dimensional vector graphics language that is used to create shapes and images in web browsers. SVG is composed of a set of commands that produce drawings. SVG is a powerful language that can be used to create simple shapes like circles and rectangles, as well as complex shapes like logos and artwork. In this tutorial, we will learn how to create a rectangle in Javascript SVG.

Table of Contents

What is SVG?

SVG stands for Scalable Vector Graphics. It is a 2-dimensional vector graphics language that is used to create shapes and images in web browsers. SVG is composed of a set of commands that produce drawings. SVG is a powerful language that can be used to create simple shapes like circles and rectangles, as well as complex shapes like logos and artwork. SVG is an XML-based language, meaning that it is composed of text that can be edited in any text editor. SVG can be used to create both static and dynamic graphics.

Creating a Rectangle in Javascript SVG

In Javascript SVG, a rectangle can be created using the rect element. The rect element is composed of four attributes: x, y, width, and height. The x and y coordinates determine the position of the rectangle, while the width and height determine the size of the rectangle. The rect element also has several optional attributes, such as rx and ry, which can be used to create rounded corners.

To create a simple rectangle in Javascript SVG, you can use the following code:

var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
 rect.setAttributeNS(null, 'x', 0);
 rect.setAttributeNS(null, 'y', 0);
 rect.setAttributeNS(null, 'width', 100);
 rect.setAttributeNS(null, 'height', 200);
 document.getElementById('rectangle').appendChild(rect);

This code creates a rectangle with a x coordinate of 0, a y coordinate of 0, a width of 100 and a height of 200. The rectangle is appended to an element with an id of rectangle. The result of this code is shown below:

rectangle example

In the example above, the rectangle is positioned at the top-left corner of the rectangle element, and is 100px wide and 200px tall.

Creating a Rounded Rectangle in Javascript SVG

In Javascript SVG, a rounded rectangle can be created by using the rx and ry attributes. The rx and ry attributes determine the radius of the rounded corners. To create a rounded rectangle, you can use the following code:

var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
 rect.setAttributeNS(null, 'x', 0);
 rect.setAttributeNS(null, 'y', 0);
 rect.setAttributeNS(null, 'width', 100);
 rect.setAttributeNS(null, 'height', 200);
 rect.setAttributeNS(null, 'rx', 10);
 rect.setAttributeNS(null, 'ry', 10);
 document.getElementById('rectangle').appendChild(rect);

This code creates a rounded rectangle with a x coordinate of 0, a y coordinate of 0, a width of 100, a height of 200, an rx of 10 and an ry of 10. The result of this code is shown below:

rounded rectangle example

In the example above, the rounded rectangle is positioned at the top-left corner of the rectangle element, and is 100px wide and 200px tall. The rounded corners have a radius of 10px.

Conclusion

In this tutorial, we have learned how to create a rectangle and a rounded rectangle in Javascript SVG. We have also seen how the rect element is composed of four attributes: x, y, width, and height. We have also seen how the rx and ry attributes can be used to create rounded corners. By using the techniques described in this tutorial, you should be able to create simple shapes with Javascript SVG.