InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Explain with example SVG. |
|
Answer» SVG or Scalable VECTOR Graphics is a mark-up language for creating beautiful, 2-D graphics. SVG is open sourced and designed to work with other web standards like CSS and DOM. We can draw different shapes with ease with sag like circle, rectangle, ellipse, polygon and ALSO various other effects. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>SVG Demo</title> <style> .grid__svg { DISPLAY: grid; place-content: center; } </style> </head> <body> <div class="grid__svg"> <h4>SVG Demo</h4> <div class="circle"> <svg WIDTH="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </div> <div class="rectangle"> <svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> </svg> </div> <div class="ellipse"> <svg height="140" width="500"> <ellipse cx="110" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg> </div> <div class="line"> <svg height="210" width="500"> <line x1="0" y1="0" x2="150" y2="150" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg> </div> <div class="polygon"> <svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /> </svg></div> </div> </body> </html> |
|