HTML Tutorial

HTML Tag: <svg>

Usage:

<svg> is an HTML element that represents a scalable vector graphic (SVG). SVGs are XML-based graphics that can be scaled without losing quality. They are often used for logos, icons, and other complex graphics.

Attributes:

  • height: The height of the SVG in pixels.
  • width: The width of the SVG in pixels.
  • viewBox: A set of coordinates that define the visible area of the SVG.
  • preserveAspectRatio: Specifies how the SVG should be scaled to fit the available space.

Examples:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

This example creates a red circle with a radius of 40 pixels, centered in a 100x100 SVG.

Exploring the <svg> Tag:

<!DOCTYPE html>
<html>
<head>
  <title>Exploring the SVG Tag</title>
</head>
<body>
  <svg height="200" width="200">
    <rect x="0" y="0" width="200" height="200" fill="blue" />
    <circle cx="100" cy="100" r="50" fill="red" />
  </svg>
</body>
</html>

This example creates a blue rectangle and a red circle inside an SVG. You can view the SVG in a web browser to see the results.