SVG Tutorial Series: SVG Elements | Part 2

SVG is a language based on XML. SVG also supports dynamic changes based upon screen size and the image does not get pixelated.

1. The ‘rect’ element.

A “rect” element is used to draw a rectangle. We have the following property that can be played to draw a rectangle.

• x — Left top coordinate of the element, that can be used to draw the diagram (x-axis).
• y — Left top coordinate of the element, that can be used to draw the diagram (y-axis).
• width — Width of our rectangle.
• height- Height of our rectangle.
• rx — Rounded corner (x-axis).
• ry — Rounded corner (y-axis).

<h2>SVG Rectangle.</h2>   
<svg width="400" height="400">  
     <rect width="400"
           height="100"
           fill="red"
           stroke-width="1"
           stroke="rgb(0,0,0)"/>  
</svg>

SVG Rect

2. The ‘circle’ element

As the name suggests this circle element property is used to draw a SVG circle diagrams.

• cx — The x coordinate of the center of the circle.
• cy — The y coordinate of the center of the circle.
• r — The r is the radius of the circle.

<h2> SVG Circle Element</h2>  
<svg style="border:1px solid black" width="400" height="400">  <circle 
       cx="200"          
       cy="200"
       r="40"
       stroke="black"
       stroke-width="4"          
       fill="none" />
</svg>

SVG Circle

3. The ‘polygon’ element

The polygon SVG element is the one that is used to draw any shape with any number of the side as you want to draw in your SVG.

Polygon SVG element is a unique element that can be used to draw.

<h2> Polygon</h2>
<svg style="border:1px solid black" width="300" height="200">  <polygon points="100,10 40,198 190,78 10,78 160,198"                      fill="red"           stroke="purple"
stroke-width="5" />
</svg>

SVG Polygon

4. The ‘path’ SVG element

The path SVG element is the kind of all the elements, if you are aware of how the path element work, you are good enough to work on any kind of styling. You can create a circle, rectangle, ellipses, etc using your path element.

Let’s take an example.

<h2> SVG Path Element</h2> 
<svg style="border:1px solid black"        
     width="300"
     height="200">
<path d="M50 0 V100 H100"
       fill="none"
       stroke-width="5"
       stroke="purple">
</path>
</svg>

SVG Path

Since you need to understand the path element and you will be able to draw any element using the diagram any SVG animations using that. This blog is part of a bigger series of SVG tutorials, next video link will be added in the section below.

Link to the other blogs. - 
- 1. Yet to be added.
- 2. SVG Tutorial Series: SVG Elements | Part 2

You can also find the video playlist for the SVG tutorial Series.

1. SVG Series | Viewport VS Viewbox | Part 1

2. SVG Series | SVG Elements | Rect, Circle, Polygon, and Path | Part 2

About The Author

Apoorv Tomar is the Software developer and founder of Mindroast. You can connect with him on Twitter, Linkedin, and Instagram.

Originally posted here: Click to reach