SVG是基于XML的矢量图形格式，可直接嵌入HTML，通过<svg>标签绘制矩形、圆形等图形，支持CSS和JavaScript控制，适合创建可缩放、交互式图形。
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以直接嵌入HTML中显示清晰、可缩放的图形。它不需要外部文件，支持CSS和JavaScript控制，非常适合图标、图表和交互式图形。
使用 <svg> 标签直接嵌入HTML
最简单的方式是在HTML中直接使用 <svg> 标签来绘制图形。浏览器原生支持渲染SVG内容，无需插件。
基本结构如下：
<svg width="200" height="100"><rect x="10" y="10" width="150" height="80" fill="blue" />
</svg>
这段代码会在页面上绘制一个蓝色矩形。其中：
立即学习“前端免费学习笔记（深入）”；
- width/height：定义SVG画布大小
- <rect>：绘制矩形，x、y为位置，width、height为尺寸，fill是填充色
常用基础图形标签
SVG提供多种基本图形元素，适合快速构建图形。
- <circle cx="50" cy="50" r="40" fill="red" />：绘制圆形，cx/cy是圆心坐标，r是半径
- <rect x="10" y="10" width="100" height="50" stroke="black" fill="none" />：空心矩形，stroke是边框颜色
- <line x1="0" y1="0" x2="100" y2="100" stroke="green" />：绘制线条
- <polygon points="50,0 100,50 50,100 0,50" fill="purple" />：绘制多边形，points定义顶点坐标
与CSS和JavaScript结合
SVG元素可以添加class、id，像普通HTML元素一样被样式和脚本操作。
例如用CSS改变颜色：
<style>.highlight { fill: orange; }
</style>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" class="highlight" />
</svg>
也可以通过JavaScript动态修改属性：
<script>document.querySelector('circle').setAttribute('fill', 'pink');
</script>
内联嵌入 vs 外部引用
除了直接写在HTML中的“内联SVG”，还可以通过以下方式引入：
- <img src="icon.svg" />：作为图片使用，但无法用CSS或JS控制内部元素
- <object data="chart.svg" type="image/svg+xml"></object>：保留交互能力，适合复杂SVG
- iframe 或 ajax 加载：高级用法，适用于动态内容
推荐在需要样式或交互时使用内联方式。
基本上就这些。掌握 <svg> 和几个基础图形标签后，就能在网页中创建清晰、响应式的矢量图形了。不复杂但容易忽略细节，比如坐标系统和单位默认是像素。慢慢尝试，很快就能上手。
