Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login
Lesson 21 of 21 – HTML SVG
100%

HTML SVG Graphics

SVG stands for Scalable Vector Graphics. It is an XML-based format used to create vector graphics directly inside HTML pages.

Note: SVG graphics can be resized without losing quality and support animation and CSS styling.
What is SVG?
  • SVG stands for Scalable Vector Graphics.
  • Used to create vector graphics for the web.
  • Written in XML format.
  • Supports animation.
  • Works with CSS and JavaScript.
  • Recommended by W3C.
The HTML SVG Element

The HTML SVG element acts as a container for vector graphics. 

<svg width="100" height="100">

...

</svg>

SVG can draw circles, rectangles, lines, polygons, text and much more.

SVG Circle Example 
<svg width="100" height="100">

<circle
cx="50"
cy="50"
r="40"
stroke="green"
stroke-width="4"
fill="yellow"/>

</svg>
SVG Rectangle Example 
<svg width="400" height="120">

<rect
x="10"
y="10"
width="200"
height="100"
stroke="red"
stroke-width="6"
fill="blue"/>

</svg>
SVG Rectangle with Opacity 
<svg width="400" height="180">

<rect
x="50"
y="20"
rx="20"
ry="20"
width="150"
height="150"
style="fill:red;
stroke:black;
stroke-width:5;
opacity:0.5"/>

</svg>
Advantages of SVG
  • Scalable without losing quality.
  • Lightweight for simple graphics.
  • Can be styled using CSS.
  • Supports animation.
  • Accessible for screen readers.
  • Can be manipulated with JavaScript.
  • Integrated with the DOM.
  • Supported by all major browsers.
SVG vs Canvas
SVG Canvas
Vector based Pixel based
Objects are remembered Objects are not remembered
Better for icons and diagrams Better for games and animations
Uses XML Uses JavaScript drawing
Key Points
  • SVG stands for Scalable Vector Graphics.
  • SVG uses XML format.
  • SVG graphics do not lose quality when resized.
  • Supports CSS and JavaScript.
  • Can create circles, rectangles and polygons.
  • Supports animation.
  • Each SVG object can be manipulated individually.
  • Works in all modern browsers.
  • Better for logos, icons and charts.
  • SVG is a W3C standard.

🧠 Quiz

What does SVG stand for?



← Previous Course Completed 🎉