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> 



2. The ‘circle’ element As the name suggests this circle element property is used to draw a SVG circle diagram.

  • 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>


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>




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 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> 


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.
- Yet to be added.


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


SVG Series | Viewport VS Viewbox | Part 1


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


Newsletter

Subscribe to my Newsletter, Such informative content will reach directly to your mailbox. Click to reach

Hi, thanks for stopping by!

Hope you are getting benefitted out of these articles. Don't forget to subscribe to the Newsletter where we will serve you with the curated content right at your mailbox.

Let the posts
come to you.