midHTML5
What is the 'SVG' element and how is it used in HTML5?
Updated Apr 28, 2026
Short answer
Scalable Vector Graphics (SVG) define vector-based graphics in XML format.
Deep explanation
Unlike Canvas, SVG is 'retained mode'. Every drawn shape is an element in the DOM, meaning you can attach JS events to them and style them with CSS. They remain crisp at any resolution.
Real-world example
Icons, logos, and complex illustrations that need to scale perfectly on high-DPI screens.
Common mistakes
- Using SVG for very complex scenes with thousands of nodes (this kills DOM performance).
Follow-up questions
- Can you style SVG with external CSS?