Abbreviation of SVG Scalable Vector Graphics and it is is used for 2D-graphics and graphical designed applications. SVG is commonly used to make diagrams like charts, Two-dimensional graphs in an X,Y coordinate system etc.
Circle using SVG
<
svg
width
="
100
"
height
="
100
"
>
<
circle
cx
="
50
"
cy
="
50
"
r
="
40
"
stroke
="
orange
"
stroke-width
="
4
"
fill
="
skyblue
"/
>
<
/svg
>
Explanation of above circle
to perform any action with SVG tag first of all put svg
tag and
then put other all code between svg tag.Here cx is for angal x-axes and cy is
is for angal y-axes. while ry is for radius on angal y-axes.stroke is used for
border and stroke width is for border width and fill is used for inner of svg
shape.
Rectangle using SVG
<
svg
width
="
300
"
height
="
100
"
>
<
rect
width
="
300
"
height
="
100
"
style
="
fill
:
lightgrey
;
stroke-width
:
5
;
stroke
:
blue
"/
>
<
/svg
>
Explanation of above rectangle
As above example is given of a rectangle. Here first of all svg tag is used and between them width and height is used. There is special rect tag is used for rectangle.
Polygon using SVG
<
svg
width
="
300
"
height
="
200
"
>
<
polygon
points
="
100,10 40,198 190,78 10,78 160,198
"
style
="
fill
:
brown
;
stroke
:
red
;
stroke-width
:
5
;
fill-rule
:
evenodd
;" /
>
<
/svg
>
Explanation of above polygon
As above example is given of a polygon. Here first of all svg tag is used and between them width and height is used. To show polygon there is polygon tag and in between this tag other all functions are performed.
Rounded Rectangle using SVG
<
svg
width
="
300
"
height
="
200
"
>
<
rect
x
="
80
"
y
="
20
"
rx
="
20
"
ry
="
20
"
width
="
150
"
height
="
150
"
style
="
fill
:
lightgreen
;
stroke
:
black
;
stroke-width
:
2
;
opacity
:
0.5
" /
>
<
/svg
>
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.