HTML

HTML

πŸ“Œ What is SVG?

SVG stands for Scalable Vector Graphics.

This means graphics are defined using mathematical shapes rather than pixels, so they can be resized without losing quality.

SVG is based on XML, which means shapes like circles, rectangles, and lines are created using tags./p>

Each element inside SVG is treated as a separate object.

πŸ‘‰ Because of this:

  1. You can style SVG elements with CSS
  2. You can manipulate them with JavaScript
  3. You can interact with them just like normal HTML elements

SVG works seamlessly with modern web technologies such as the DOM, CSS, and JavaScript.

πŸ” Basic Structure & Examples

πŸ”Ή 1. <svg> Container

All SVG graphics are placed inside the <svg> element.

πŸ‘‰ This creates a drawing area of 200Γ—200 pixels.

πŸ”Ή 2. Drawing a Circle

πŸ‘‰ Explanation:

  1. cx, cy β†’ center position
  2. r β†’ radius
  3. stroke β†’ border color
  4. fill β†’ inside color

This creates a yellow circle with a green border.

πŸ”Ή 3. Rectangle

πŸ‘‰

  1. x, y β†’ starting position
  2. width, height β†’ size

Rounded Corners Example

HTML

<rect x="10" y="10" width="180" height="80"
rx="20" ry="20"
fill="red" opacity="0.7" />

πŸ‘‰ rx and ry make the corners rounded.

πŸ”Ή 4. Polygon (Example: Star Shape)

πŸ‘‰ The points attribute defines all corner coordinates.

πŸ”Ή 5. Gradient and Text

πŸ‘‰

  1. Gradients are defined inside <defs>
  2. Shapes can use them via fill="url(...)"
  3. <text> allows adding and styling text

  • Summary

  • SVG is used for vector-based graphics
  • It does not lose quality when resized
  • Each shape is an independent, controllable element
  • Works perfectly with CSS, JavaScript, and DOM

  • Ideal for:

  • Icons
  • Logos
  • Charts
  • Interactive visuals
  • πŸ‘‰ SVG is one of the most powerful tools for creating modern, scalable web graphics.

Html Canvas
Html Multimedya