SVG（可缩放矢量图形）是基于XML的矢量图像格式，适合在网页中使用。以下是基础内容：
1. SVG简介
SVG通过数学公式定义图形，与位图不同，它能无限缩放而不会失真。
2. 创建SVG文件
- 使用
<svg>标签包裹所有内容 - 定义宽度和高度：
width="200" height="200" - 示例代码：
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/> </svg>
3. 常用元素
| 元素 | 作用 |
|---|---|
<path> |
绘制复杂形状 |
<rect> |
创建矩形 |
<line> |
画线段 |
<text> |
添加文本 |
4. 应用场景
- 图标设计：如网站favicon
- 数据可视化：折线图、饼图等
- 网页动画：结合CSS或JavaScript
- 响应式设计：适应不同屏幕尺寸
5. 学习资源
- SVG基础教程（推荐从零开始练习）
- MDN SVG指南（权威文档）
- CodePen SVG示例（可互动修改代码）
📌 提示：尝试用 <text> 元素添加中文注释，例如：<text x="10" y="20">SVG入门</text>