最简单方式是将<svg>标签直接写入HTML文件，作为原生DOM元素支持CSS/JS操作；需设置viewBox实现响应式缩放，避免冗余属性，颜色推荐用currentColor继承主题色。
直接用 <svg> 标签就能在网页里画矢量图，不需要额外库，现代浏览器原生支持。
怎么把 SVG 写进 HTML 页面里
最简单的方式是把 SVG 代码直接写在 HTML 文件中，用 <svg> 开头、</svg> 结尾。它不是图片链接，而是可操作的 DOM 元素。
- 可以内联写在
<body>任意位置，比如放在<div>里 - 宽度高度建议显式设置，例如
width="200" height="150"；用百分比或viewBox更适合响应式 - 不要漏掉
xmlns="http://www.w3.org/2000/svg"—— 虽然某些浏览器能容错，但严格模式下缺失会导致渲染异常或样式失效 - 避免复制粘贴外部 SVG 文件时带入已弃用属性，比如
xlink:href（SVG 2 中已被href取代）
画一个圆或路径，关键属性不能写错
SVG 绘图靠的是声明式属性，不是 canvas 那种命令式调用。写错名字或单位，图形就消失或错位。
-
<circle cx="50" cy="50" r="20" fill="blue"></circle>：注意cx/cy是圆心坐标，不是左上角；r是半径，不能写成radius -
<path d="M10 10 L90 90"></path>：d属性是路径指令，大小写敏感——M表示 moveTo，L是 lineTo；小写m/l是相对坐标，混用容易偏移 - 颜色值支持命名色、十六进制、rgb()，但不支持 hsl()（部分旧引擎）；透明度优先用
fill-opacity或opacity，别只改fill的 alpha 通道（无效）
为什么放大后模糊？可能是没设 viewBox
SVG 失去“可缩放”优势，往往是因为只设了 width/height，却没配 viewBox。后者才是控制缩放行为的核心。
-
viewBox="0 0 100 100"定义了逻辑画布范围；实际显示尺寸由width/height决定，浏览器自动按比例拉伸内容 - 删掉
viewBox后，SVG 会退化为固定像素容器，缩放时等同于拉伸位图 - 响应式场景下，可只留
width="100%" height="auto"+viewBox，让 SVG 自适应父容器宽高比 - 慎用
preserveAspectRatio="none"—— 它会强制扭曲图形，仅在明确需要拉伸变形时才启用
用 CSS 控制 SVG 元素要注意兼容性边界
你可以像操作普通 HTML 元素一样给 <svg> 或内部 <circle> 加 class、写 CSS，但并非所有 CSS 属性都生效。
- 几何属性如
width、height、transform可以用 CSS 控制；但cx、cy、r等 SVG 原生属性**不能**用 CSS 设置（它们不是 CSS 属性） -
fill、stroke、opacity这类表现属性支持 CSS，但注意优先级：行内属性 > CSS 类 > 外部样式表；且fill: currentColor是合法的，可用于主题适配 -
filter、mask等高级效果需配合<defs>使用，CSS 中写filter: url(#myBlur)才有效，不能直接写blur(2px) - IE11 及更早版本不支持对 SVG 子元素使用
display: none，要用visibility: hidden或移除元素
真正麻烦的不是语法，而是把 viewBox、preserveAspectRatio 和 CSS 尺寸三者配平——稍有偏差，图形就错位、裁切或比例失真，而且不容易一眼看出来。
