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