SVG on the web offers benefits beyond just producing graphics that are independent of resolution. You can add cool animations and effects to your front end with a little CSS and JavaScript without asking the user to download large plugins. The code is given below:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG lines with transform/rotate</title>
</head>
<body>
<svg width="500" height="350">
<circle id="circle orange" r="30" cx="50" cy="50" fill="orange" />
<rect id="rectangle blue" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>
<animate
xlink:href="#circle orange"
attributeName="cx"
from="50"
to="450"
dur="5s"
begin="click"
fill="freeze"
id="circ-anim"/>
<animate
xlink:href="#rectangle blue"
attributeName="x"
from="50"
to="425"
dur="5s"
begin="circ-anim.begin + 1s"
fill="freeze"
id="rect-anim"/>
</svg>
<p>Click on the circle and rectangle to animate.</p>
SVG.css
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}
p {
color: #aaa;
text-align: center;
margin: 2em 0;
}
Scalable Vector Graphics (SVGs) highly useful in some situations, despite their limits, and if you have a skilled design team, you can also produce a more aesthetically attractive experience without unduly taxing the web browser or delaying load times.
To learn more about Scalable Vector Graphics (SVGs) click here:
brainly.com/question/20748542
#SPJ4
