最简可用svg结构为，必须指定width/height否则渲染为0×0；强烈建议添加viewbox属性（如viewbox="0 0 200 100"）以确保响应式缩放与坐标系正确映射。
直接在HTML里写<svg></svg>标签就能用，不需要额外加载或配置，浏览器原生支持。
怎么写一个可工作的SVG基础结构
必须指定width和height，否则多数浏览器会渲染成0×0尺寸，图形不可见。可选但强烈建议加上viewBox属性，它决定坐标系缩放行为，尤其在响应式场景中避免拉伸变形。
-
<svg width="200" height="100"></svg>是最简可用结构 - 加
viewBox="0 0 200 100"后，width/height只控制容器大小，内部绘图按viewBox比例缩放 - 省略
xmlns属性通常不影响显示，现代浏览器自动补全；但导出到某些工具或旧IE可能报错
常见图形元素怎么填参数才不出错
每个基础图形都有强制位置/尺寸字段，漏掉会导致不渲染或偏移。注意<circle></circle>和<ellipse></ellipse>的半径命名不同，<rect></rect>的圆角需同时设rx和ry才生效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<circle cx="50" cy="50" r="40"></circle>：cx/cy是圆心，不是左上角；r不能为负或0 -
<ellipse cx="50" cy="50" rx="40" ry="20"></ellipse>：rx/ry分别控制x/y方向半径，不是宽高 -
<rect x="10" y="10" width="100" height="50" rx="8" ry="8"></rect>：仅设rx不设ry时，部分浏览器（如Safari）会忽略圆角 -
<line x1="0" y1="0" x2="100" y2="100"></line>：必须四个坐标都提供，缺一不可
为什么CSS改不了fill颜色或hover没反应
根本原因是SVG内联样式（style="fill:red"）优先级高于外部CSS规则，且<svg></svg>默认不继承父级color值。另外，:hover需要元素有交互能力——空<path></path>或fill="none"的图形无法触发伪类。
- 删掉元素上的
style属性，改用class + CSS定义fill，才能被:hover覆盖 - 对
fill="none"的图形加stroke或设置pointer-events: visible，否则鼠标事件不冒泡 -
<g></g>分组元素本身不渲染，但可统一加class或transform，适合批量操作 - 不要依赖
currentColor自动继承文字色，SVG中需显式声明fill="currentColor"
什么时候该用内联SVG，什么时候该用<img>
能用JavaScript动态改属性、要CSS动画、需无障碍支持（如<title></title>描述）——必须内联。反之，纯装饰性图标、SEO不敏感、多页复用且内容稳定——用<img src="icon.svg">更轻量。
- 内联SVG体积大时，考虑用
<use></use>引用外部<symbol></symbol>实现Sprite，减少重复代码 -
<img>引入的SVG无法用CSS修改内部fill，但可通过filter: brightness(0) invert(1)做简单单色反色 - 用
<object></object>可保留脚本上下文，但加载失败时备用内容难控制，兼容性不如<img>
真正容易被忽略的是viewBox和preserveAspectRatio的组合行为：没设preserveAspectRatio时，不同宽高比下图形可能被裁剪或留白，而这个属性默认值在各浏览器中并不完全一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
