SVG Tutorial Series: SVG Elements | Part 2
Updated: Jul 11, 2021
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.