SVG (Scalable Vector Graphics) is used to define vector-based graphics for the Web. Unlike standard images (like .jpg or .png), SVG graphics are defined in XML format and do not lose any quality when zoomed or resized.
Scalable:Graphics maintain perfect quality at any size.
XML-Based:Every element is available within the SVG DOM, allowing for CSS styling and JavaScript interaction.
Interactive:Every attribute and element in an SVG file can be animated.
LearnHTML StandardIt is a recommended web standard that integrates with HTML, CSS, and JavaScript.
The HTML <svg> element acts as a container for drawing paths, shapes, and text. Below are common examples of how to use it.
The cx and cy attributes define the center, and r defines the radius.
Use rx and ry to create rounded corners, and opacity to control transparency.
The points attribute defines the coordinates for each corner of the shape.
You can define complex gradients within the <defs> tag and apply them to shapes.
The primary difference is that SVG is XML-based (object-oriented), while Canvas is pixel-based (raster).
Image comparing vector graphics vs raster graphics
| Feature | SVG | SVG |
|---|---|---|
| Resolution | Independent (Scalable) | Dependent (Fixed) |
| Event Handlers | Supported (can click shapes) | Not supported |
| Text Rendering | Excellent | Poor |
| Performance | Slower with many objects | Faster for complex animations |
| Best Use Case | Icons, UI elements, Diagrams | High-performance games, Photo editing |