SVG, or Scalable Vector Graphics, is an XML-based format for describing vector graphics. It's widely used for creating graphics that can scale seamlessly without losing quality. Here are some basic drawing methods in SVG and how to use SVG in HTML:
xml<rect x="10" y="10" width="100" height="50" fill="blue" />
xml<circle cx="50" cy="50" r="30" fill="red" />
xml<line x1="10" y1="10" x2="100" y2="50" stroke="green" stroke-width="2" />
xml<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent" />
xml<text x="20" y="40" font-family="Arial" font-size="20" fill="purple">Hello SVG!</text>
xml<g>
<rect x="10" y="10" width="50" height="30" fill="orange" />
<circle cx="30" cy="60" r="15" fill="yellow" />
</g>
To embed SVG in an HTML document, you can use the <svg> element. Here's an example:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Example</title>
</head>
<body>
<svg width="200" height="100">
<!-- SVG drawing elements go here -->
<rect x="10" y="10" width="100" height="50" fill="blue" />
<circle cx="150" cy="35" r="25" fill="green" />
<text x="20" y="80" font-family="Arial" font-size="16" fill="black">SVG Example</text>
</svg>
</body>
</html>
In this example, the <svg> element has a width and height attribute to define the dimensions of the SVG canvas. Inside the <svg> element, you can include various SVG drawing elements as needed.
Remember that you can adjust the coordinates, dimensions, colors, and other attributes according to your design requirements. SVG provides a powerful way to create scalable and interactive graphics in web development.