<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG in HTML Example</title>
</head>
<body>
<h2>SVG Example in HTML</h2>
<!-- SVG 图形 -->
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- 矩形 -->
<rect width="150" height="80" fill="lightblue" stroke="black" stroke-width="2" x="25" y="10" />
<!-- 文本 -->
<text x="100" y="55" font-family="Arial" font-size="16" fill="black" text-anchor="middle">SVG Example</text>
</svg>
</body>
</html>
在上面的例子中：
- <svg> 元素用于创建SVG容器，其中的 width 和 height 属性定义了SVG图形的宽度和高度。
- <rect> 元素和 <text> 元素用于在SVG容器中绘制矩形和文本。
将上述代码保存为HTML文件，并在浏览器中打开，你将看到一个包含矩形和文本的SVG图形。SVG元素可以嵌套，允许你创建更复杂的图形结构。
此外，你还可以通过在SVG中使用CSS样式，或者在SVG元素上应用JavaScript来实现交互性和动态效果。SVG的灵活性使其成为在Web开发中创建丰富图形内容的有力工具。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12377/SVG