SVG是HTML5中基于XML的矢量图形标准，可无损缩放，适用于图标、图表等场景。1. 三种嵌入方式：直接书写SVG标签、img引入外部文件、CSS背景图；其中直接书写最灵活。2. 基本图形包括rect（矩形）、circle（圆形）、ellipse（椭圆）、line（直线）、polygon（多边形）和path（路径），通过属性定义形状与样式。3. 支持CSS样式控制fill、stroke、opacity等，并可通过JavaScript实现交互效果。4. 实际应用如绘制房子，组合多个图形构建复杂图像。SVG优势在于清晰度不受分辨率影响，适合响应式设计，结合CSS和JS可实现动画与交互，但需注意坐标系原点在左上角，精确计算位置。
SVG（Scalable Vector Graphics）是HTML5中用于绘制矢量图形的一种标准，它基于XML语法，可以直接嵌入HTML页面中。使用SVG可以创建清晰、可缩放的图形，适用于图标、图表、动画等场景。
1. 在HTML中嵌入SVG的方法
有三种常见方式将SVG集成到网页中：
- 直接在HTML中书写SVG标签：将SVG代码写在<svg>标签内，浏览器会直接渲染。
- 作为外部文件引入：使用img标签引用.svg文件，如：<img src="shape.svg" alt="SVG图">。
- 通过CSS背景图引入：将SVG用作元素的background-image，适合图标类应用。
最灵活的方式是直接在HTML中编写SVG代码，便于操作和动态修改。
2. 常用SVG基本图形绘制
SVG提供多种基础图形标签，以下是一些常用示例：
立即学习“前端免费学习笔记（深入）”；
<rect> - 绘制矩形
<svg width="200" height="100"><rect x="10" y="10" width="150" height="80" fill="blue" stroke="black" stroke-width="2"/>
</svg>
上面代码绘制一个蓝色填充、黑色边框的矩形。
<circle> - 绘制圆形
<svg width="200" height="200"><circle cx="100" cy="100" r="50" fill="red" />
</svg>
cx和cy定义圆心坐标，r为半径。
<ellipse> - 椭圆
<svg width="200" height="100"><ellipse cx="100" cy="50" rx="80" ry="30" fill="green"/>
</svg>
<line> - 直线
<svg width="200" height="100">
<line x1="0" y1="0" x2="200" y2="100" stroke="black" stroke-width="2"/>
</svg>
<polygon> - 多边形
<svg width="200" height="200"><polygon points="100,10 40,180 160,180" fill="purple"/>
</svg>
points属性定义多个坐标点，自动闭合路径。
<path> - 路径（最强大）
<svg width="200" height="200"><path d="M10 10 L90 10 L50 90 Z" fill="orange"/>
</svg>
d属性包含绘图指令：M（移动）、L（连线）、Z（闭合）。支持贝塞尔曲线，适合复杂图形。
3. 样式与交互设置
SVG元素支持CSS样式，可通过属性或CSS类控制外观。
- fill：填充颜色
- stroke：描边颜色
- stroke-width：描边宽度
- opacity：透明度
也可以添加JavaScript事件，实现交互效果：
<circle cx="100" cy="100" r="50" fill="blue"onclick="this.setAttribute('fill', 'yellow')"/>
点击后圆形变为黄色。
4. 实际应用示例：绘制一个简单房子
<svg width="200" height="200"><!-- 房体 -->
<rect x="50" y="100" width="100" height="80" fill="#ccc" stroke="#000"/>
<!-- 屋顶 -->
<polygon points="50,100 100,60 150,100" fill="#f99"/>
<!-- 门 -->
<rect x="90" y="140" width="20" height="40" fill="#664"/>
<!-- 窗户 -->
<circle cx="70" cy="120" r="10" fill="#ff0" />
</svg>
组合多个图形，构建更复杂的视觉效果。
基本上就这些。掌握基础标签和属性后，就能灵活绘制各种矢量图形。SVG优势在于无损缩放，适合响应式设计，结合CSS和JavaScript还能实现丰富动画和交互。不复杂但容易忽略细节，比如坐标系原点在左上角，绘图时注意位置计算。
