直接用 url() 引入 svg 只是贴图，不可编辑、不响应 css；content: url() 在伪元素中常失效因无固有尺寸且支持极弱；推荐用 data uri 或内联 svg 实现可控与动态样式。
直接用 url() 引入外部 SVG 文件（比如 background-image: url("icon.svg")）能显示，但图标不可编辑、无法动态改色、不响应 CSS 变量——这不是“引入资源”，只是贴了一张图。
为什么 content: url("icon.svg") 在伪元素里常失效
根本原因是伪元素没有固有尺寸，且 content: url() 对 SVG 的支持极弱：不解析 <use></use>、忽略 <style></style>、静默丢弃外部引用，连控制台都不报错。更麻烦的是路径解析依赖 CSS 文件位置，不是 HTML 位置；开发时相对路径对了，上线走 CDN 就 404。
- 必须显式设
display: inline-block和具体width/height（如16px），不能靠font-size撑开 - SVG 源文件不能含
<?xml ...?>、注释、<script></script>或内联fill="#000"—— 这些都会让渲染失败或颜色锁死 - 本地开发建议用 Data URI 替代，避免跨域和路径问题
用 background-image + Data URI 才真正可控
把 SVG 内容 URL 编码后塞进 background-image: url('data:image/svg+xml,...')，既绕过 CSP/CDN 限制，又能用 background-size 精确缩放，兼容性也比 content: url() 好得多（IE9+ 支持）。
- 先用
svgo压缩 SVG：svgo -i icon.svg -o icon.min.svg --config='{"plugins":[{"removeXMLNS":true}]}' - 手动删掉
<?xml ...?>，把fill="#007acc"改成fill="currentColor"（方便后续用color控制） - 在浏览器控制台运行
encodeURIComponent(svgString)编码（注意不是encodeURI），再拼到url('data:image/svg+xml,xxx')里 - CSS 属性值必须用单引号包裹，否则双引号冲突；所有空格、
"、#、、<code>>都得编码（%20，"→%22，#→%23）
要动态样式？SVG 必须进 DOM 树
所有“可编辑”需求（CSS 选中 <path></path>、JS 操作节点、fill 响应主题色）的前提只有一个：SVG 内容必须成为当前 HTML 文档的 DOM 节点。任何 url() 方式都做不到这点。
- 最稳方案是内联 SVG：
<svg><path d="..."></path></svg>，然后写svg path { fill: var(--accent); } - 用
<object></object>嵌入外部 SVG 文件，但要注意跨域；JS 访问需用el.contentDocument，CSS 默认隔离，得在 SVG 文件里写内联样式或用 JS 注入 - 别碰
<img src="icon.svg">或background-image: url("icon.svg")——它们渲染完就和 DOM 断联，改色只能靠滤镜，且模糊失真
真正麻烦的从来不是怎么“引入”，而是 SVG 源文件是否干净：设计工具导出的 SVG 常带死板的 fill="#000"、冗余 xmlns、甚至 <defs></defs> 里藏着没用的渐变——这些不清理，再花哨的 CSS 也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
