HTML5
HTML5

HTML SVG

SVG means Scalable Vector Graphics. It lets you describe shapes such as circles, rectangles, and lines as elements. Unlike a canvas drawing, SVG keeps its shapes as separate elements. That means a circle can be styled, selected, or made interactive on its own. SVG shapes are mathematical descriptions, so they can stay sharp when the image is enlarged. SVG is commonly useful for icons, logos, diagrams, and other graphics that need to scale cleanly.

Why this matters

  • ·SVG stays sharp when resized.
  • ·Individual shapes can be styled and interacted with.
  • ·SVG is excellent for icons, logos, and diagrams.

Common mistakes

  • ·A very complicated SVG can become heavy.
  • ·SVG is not always the best choice for pixel-heavy animation.
  • ·A decorative SVG should still be considered for accessibility.
Your codeHTML
Live preview

Frequently asked questions

Scalable Vector Graphics.

Practice questions

Question 1

Create an SVG circle.

Your codeHTML
Live preview

Question 2

Create an SVG rectangle.

Your codeHTML
Live preview

Quick check

Just for this topic answer honestly, then check yourself.

1 / 3

Which is a vector graphics technology?