What is SVG
1. SVG stands for Scalable Vector Graphics, SVG can be used to create drawing, graphics, images etc, all by using XML elements.
How to draw circle in SVG
In order to draw a circle using svg we need to use the circle element wrapped in svg tag.
<svg height="60 width="60> <circle cx="0" cy="0" r="40" stroke="blue" stroke-width="3" fill="green" /> </svg>
Here cx and cy are the x and y coordinates and r is the radius.
How to draw a rectangle in SVG
<svg width="400" height="110"> <rect width="100" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> </svg>
In order to draw a rectangle or square we can draw svg rectangle.
here height and width are the measures of the rectangle.
How to use text inside SVG.
<svg height="30" width="100"> <text x="0" y="15" fill="red">Any text content </svg>
Here text tag can be used inside svg to display any text.
How to draw a polygon using svg
<svg height="210" width="500"> <polygon points="300,20 300,170 240,620" style="fill:aqua;stroke:red;stroke-width:2" /> </svg>
Inorder to draw a polygon we need to use the polygon element inside svg, and in points section we need to mention the desired graphical co-ordinates.
Thus using the above information we can see how easy it is to draw any graphical object with svg in html. Let us now create a greeting with the help of svg elements.
Html
<div>
<svg height="70" width="70" class="col-md-6">
<text x="0" y=30 transform="rotate(30 20,40)">Wish</text>
</svg>
<svg height="70" width="70">
<text x="0" y=30 transform="rotate(-30 30,-25)">You</text>
</svg>
<svg height="70" width="70">
<text x="30" y=30 transform="rotate(20 0,30)">A</text>
</svg>
<svg height="70" width="70">
<text x="0" y=30 transform="rotate(30 20,40)">Very</text>
</svg>
<svg height="70" width="70">
<text x="0" y=30 transform="rotate(-30 30,0)">Happy</text>
</svg>
<svg height="70" width="70">
<text x="0" y=30 transform="rotate(30 20,40)">New</text>
</svg>
<svg height="70" width="70">
<text x="0" y=30 transform="rotate(-30 30,-25)">Year</text>
</svg>
</div>
<div class="year">
<svg height="150" width="100">
<text x="30" y="100">2</text>
</svg>
<svg height="150" width="100">
<text x="30" y="100">0</text>
</svg>
<svg height="150" width="100">
<text x="30" y="100">1</text>
</svg>
<svg height="150" width="100">
<text x="30" y="100">7</text>
</svg>
</div>
Css
body {
margin: 50px 0;
padding: 0;
text-align: center;
}
div svg {
-webkit-box-shadow: -22px -15px 22px -3px rgba(107, 97, 107, 0.68);
-moz-box-shadow: -22px -15px 22px -3px rgba(107, 97, 107, 0.68);
box-shadow: -22px -15px 22px -3px rgba(107, 97, 107, 0.68);
}
.year svg {
fill: green;
stroke: #000000;
font-size: 60px;
}
svg {
margin: 5px;
border: 1px solid grey;
}
