HTML SVG Basics (original) (raw)
Last Updated : 27 Aug, 2024
SVG stands for Scalable Vector Graphics. It defines vector-based graphics in XML format. SVG graphics do not lose any quality when zoomed or resized, and every element and attribute in SVG files can be animated.
Advantages of SVG:
The advantages of using SVG over other image formats (like JPEG and GIF) are:
- SVG images scale without losing quality, making them perfect for responsive designs.
- SVG files are often smaller than bitmap images, reducing load times.
- SVG images can be edited easily with text editors, allowing for quick changes.
- SVG content is accessible to screen readers, enhancing web accessibility.
- SVG supports CSS and JavaScript animations, allowing for interactive and dynamic graphics.
Differences between SVG and Canvas
| SVG | Canvas |
|---|---|
| SVG is a language for describing 2D graphics in XML | Canvas draws 2D graphics, on the fly with JavaScript |
| If attributes of an SVG object are changed, the browser can automatically re-render the shape | Canvas is rendered pixel by pixel. In Canvas, once the graphic is drawn, it is forgotten by the browser. |
| SVG is resolution-independent | CANVAS is resolution-dependent. |
| SVG supports event handlers | CANVAS doesn't have support for event handlers. |
Example 1: Drawing a Line
In this example we displays an SVG line on a webpage. It includes an
header and a blue line drawn diagonally within an SVG element.
HTML `
HTML SVGWelcome To GeeksforGeeks
`
Output:
SVG line Drawing
Example 2: Drawing a Circle
In this example we uses the
HTML `
HTML SVG`
Output:
SVG Circle Drawing
Example 3: Drawing a Rectangle
In this example we ses the
HTML `
HTML SVG`
Output:
SVG Rectangle Drawing
Example 4: Drawing a Rounded Rectangle
In this example we uses the
HTML `
HTML SVG`
Output:
SVG Rounded Rectangle Drawing
Example 5: Drawing a Star
In this example we uses the
HTML `
HTML SVG`
Output:
SVG Star Drawing
Example 6: Drawing a Logo
In this example we creates an ellipse filled with a linear gradient from white to green. It also includes text overlaid in white with the content "GeeksforGeeks" using the ARIAL font family.
HTML `
`
Output:
GFG Logo using SVG