Prev Next

HTML SVG

SVG (Scalable Vector Graphics) is an XML-based format for drawing vector images directly in the browser. Unlike raster images, SVGs scale without losing quality. You can create shapes like lines, circles, and paths, and apply styles or even animate them, making SVG ideal for icons, logos, and complex illustrations.

Key Topics

SVG Format

SVG is XML-based, meaning you can edit it with code or tools, and it supports styling via CSS and scripting with JavaScript.

SVG Shapes

Example: Use elements like <rect>, <circle>, <line>, and <path> to create shapes.

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

SVG Example

This example draws a red circle inside an SVG canvas. A full code sample is provided below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SVG Example</title>
</head>
<body>
    <svg width="200" height="200">
        <rect x="20" y="20" width="100" height="50" fill="blue" />
        <circle cx="100" cy="100" r="40" fill="red" />
    </svg>
</body>
</html>

Explanation: The SVG includes a blue rectangle and a red circle. SVG coordinates and attributes define shapes, allowing resolution-independent graphics.

Key Takeaways

  • SVG is vector-based, scaling without losing quality.
  • Use SVG elements like <circle> and <rect> to draw shapes.
  • Style SVGs with CSS, animate with JavaScript.
  • Ideal for icons, logos, and illustrations that must remain crisp at any size.
  • SVG files are text-based, editable, and often smaller than equivalent raster images.
Prev Next