SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。在 HTML 页面中，可以通过使用<svg>标签将 SVG 图形嵌入到页面中。在本章节中，我们将讨论如何在 HTML 页面中使用 SVG。
嵌入 SVG
要在 HTML 页面中嵌入 SVG，可以使用<svg>标签。以下是一个简单的示例：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>SVG 示例</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
</body>
</html>在上面的示例中，我们创建了一个宽高为100的 SVG 元素，并在其中绘制了一个红色的圆形。
SVG 属性
SVG 元素可以设置多种属性来控制其外观和行为。以下是一些常用的 SVG 属性：
width：指定 SVG 元素的宽度height：指定 SVG 元素的高度viewBox：指定 SVG 元素的视口框，用于定义用户坐标系统fill：指定填充颜色stroke：指定描边颜色stroke-width：指定描边宽度
SVG 图形
SVG 支持多种图形元素，例如<circle>、<rect>、<line>、<polyline>等。以下是一个绘制矩形的示例：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>SVG 矩形示例</title>
</head>
<body>
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>
</body>
</html>在上面的示例中，我们使用<rect>元素绘制了一个蓝色的矩形。
以上就是在 HTML 页面中使用 SVG 的基础知识，接下来我们将深入探讨 SVG 的更多特性和用法。