svg标签必须设置width和height才能正常显示，因其无固有尺寸；viewbox需配合宽高或css使用；内联样式优先级高于外部css；href已替代xlink:href；script在内联svg中默认不执行。
svg 标签必须有 width 和 height 才能正常显示
浏览器对 <svg></svg> 的渲染依赖明确的尺寸，如果只写 <svg></svg> 不设宽高，它默认是 0×0，图形就看不见。这不是 bug，是规范行为——SVG 是“无固有尺寸”的容器，需要显式定义视口。
- 最简可行写法：
<svg width="100" height="100"><circle cx="50" cy="50" r="40"></circle></svg> - 用
viewBox替代宽高也能生效，但需配合width/height或 CSS 控制缩放，否则可能被裁剪或撑满父容器 - 纯 CSS 设置宽高（如
style="width:100px;height:100px"）也有效，但建议优先用属性，更符合 SVG 渲染逻辑
内联 SVG 中的 CSS 样式优先级比外部样式表高
直接写在 <svg></svg> 里的 <style></style> 块，或者元素上的 style 属性，会覆盖页面中 link 或 <style></style> 定义的同名规则。这点常被忽略，导致调试时样式“不生效”。
- 例如：
<circle fill="red" style="fill:blue"></circle>最终是蓝色，style属性胜出 -
<svg><style>circle{fill:green}</style> <circle></circle></svg>会应用绿色，且该<style></style>只作用于这个 SVG 内部 - 想复用样式？用
class+ 外部 CSS 更可控，但要注意类名不要和全局冲突
避免在内联 SVG 中使用 xlink:href（尤其在现代浏览器）
xlink:href 是 SVG 1.1 的写法，已在 SVG 2 中废弃。Chrome、Firefox、Safari 新版本都支持直接用 href，继续用 xlink:href 不仅冗余，还可能在某些构建工具（如 Webpack 的 HTML 插件）里被误删或报错。
- 错误写法：
<use xlink:href="#icon-home"></use> - 正确写法：
<use href="#icon-home"></use> - 如果要兼容 IE11，才需保留
xlink:href，但注意 IE11 不支持href，也不能混用 - 用
<symbol></symbol>+<use></use>复用图标时，确保<symbol></symbol>在 DOM 中已定义（通常放在<svg></svg>外的<defs></defs>或隐藏<svg></svg>里）
script 标签在内联 SVG 里默认不执行
把 <script></script> 直接写在 <svg></svg> 内部（比如绑定点击事件），大多数浏览器会解析但不运行——这是安全策略，防止 XSS。你看到控制台没报错，但脚本就是不动。
- 可行方案：用 JS 拿到 SVG 元素后，再用
addEventListener绑定，例如document.querySelector('svg').addEventListener('click', ...) - 如果真要内联逻辑，得用
<script type="application/ecmascript"></script>（已过时）或通过data-属性 + 外部脚本驱动 - 动态插入含 script 的 SVG 字符串？用
DOMParser解析后再挂载，但需手动执行脚本节点，风险高，不推荐
xlink:href 可能让图标突然消失，漏一个 width 就白写半天路径。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
