SVG
Scalable Vector Graphics (SVG) is an XML-based image format used to define two-dimensional vector-based graphics for the web. Unlike raster images (Ex .jpg, .gif, .png, etc.), a vector image can be scaled up or down to any extent without losing the image quality. An SVG image is drawn out using a series of statements that follow the XML schema — that means SVG images can be created and edited with any text editor, such as Notepad. There are several other advantages of using SVG over other image formats like JPEG, GIF, PNG, etc.
Example: In this example, we will see the code for drawing a circle using SVG elements.
html
<!DOCTYPE html> < html > < head > < title >SVG</ title > < style > #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </ style > < title >HTML5 SVG</ title > </ head > < body > < h2 align = "center" > SVG Circle(Geeks For Geeks) </ h2 > < svg id = "svgelem" height = "200" > < circle id = "greencircle" cx = "60" cy = "60" r = "50" fill = "green" /> </ svg > </ body > </ html > |
Output:
Difference between SVG and HTML 5 Canvas
SVG (Scalable Vector Graphics) is an XML-based vector image format, suitable for creating graphics and interactive elements. HTML5 Canvas is more like a blank canvas where you can draw whatever you want using pixels. SVG is great for logos and icons, while Canvas is good for dynamic animations and games.
Contact Us