可行，但仅限独立SVG文件；内联SVG或img引入时link失效，style元素在所有场景均有效且更可靠。
SVG里用引入CSS是否可行
可行，但仅限于独立 SVG 文件（即直接在浏览器地址栏打开 icon.svg），不能用于内联 SVG 或 <img src="icon.svg"> 场景。因为 SVG 作为图像嵌入时（如 img、background-image、use），其内部的 <link> 和 <style> 会被浏览器忽略——不是 bug，是规范限制。
常见错误现象：在 SVG 源码里写了 <link rel="stylesheet" href="icon.css">，本地双击打开能变色，但放进 HTML 用 img 标签一加载，样式全失效，控制台也无报错。
- 独立 SVG 文件支持
<link>，且可跨域（需服务端配 CORS） -
<style>元素在所有场景都有效（包括内联 SVG），比<link>更可靠 - 若 SVG 被当作资源加载（如
background-image: url("icon.svg")），整个文档上下文被剥离，<link>和外部请求根本不会发起
为什么
<style> 是 SVG 2 规范强制要求支持的元素，行为与 HTML 中一致，且无需额外请求、不触发跨域问题、可被 CSS 变量和媒体查询直接驱动。
示例写法（放在 <svg> 根元素内部，任意位置）：
立即学习“前端免费学习笔记（深入）”；
<svg viewBox="0 0 24 24">
<style>
.icon-fill { fill: currentColor; }
@media (prefers-color-scheme: dark) {
.icon-fill { fill: #fff; }
}
</style>
<path class="icon-fill" d="M12..." />
</svg>
-
<style>中可安全使用currentColor、CSS 自定义属性、@media等现代特性 - 不要在
<style>里写@import—— SVG 不支持，会静默失败 - 若需复用样式逻辑，建议构建时把公共 CSS 片段注入每个 SVG，而非运行时加载
用@import或外部CSS变量会失效吗
会。SVG 内部的 <style> 不支持 @import 规则；而 CSS 自定义变量（--icon-color）能否生效，取决于变量作用域——只有当 SVG 是内联时，父级 HTML 的 :root 变量才可继承；如果是 img 加载的独立 SVG，则完全隔离，变量不可见。
- 内联 SVG：
:root定义的变量 → 可被<style>中的var(--icon-color)读取 - 独立 SVG（
img或background-image）：无法访问任何外部变量，必须硬编码或用currentColor - 想动态换色？别依赖变量，改用
fill="currentColor"+ 父容器color控制，这是唯一跨场景稳定的方案
服务器配置影响能否加载成功
即使 SVG 是独立文件，<link> 能否发出请求，还取决于服务端响应头。如果 CSS 文件返回时缺少 Content-Type: text/css，Chrome/Firefox 会拒绝解析；若 SVG 本身托管在 CDN 上，而 CSS 在另一个域名，还需确保 CDN 返回 Access-Control-Allow-Origin: *（或精确域名）。
- 最简验证方式：在浏览器地址栏打开 SVG，右键「查看页面源代码」，点击
<link>的 href 链接，看 CSS 是否能单独加载并返回正确 MIME 类型 - 开发阶段建议用本地静态服务（如
npx serve），避免 Chrome 对file://协议的跨域拦截 - 生产环境若必须用
<link>，请确认构建流程中 CSS 路径已转为绝对 URL，且未被 CDN 缓存旧版本
<style> 更稳，currentColor 更通用，而 <link> 带来的路径、CORS、MIME、缓存问题，远比它省下的几行代码麻烦得多。 
