内联svg是唯一支持css和js完全控制的引入方式，必须直接嵌入html中并删除内联fill/stroke属性，配合currentcolor和父元素color实现颜色联动与:hover响应。
内联SVG是唯一支持CSS和JS完全控制的引入方式
想用 :hover 改颜色、用 currentColor 统一主题色、或用 JS 动态修改 path 的 d 属性？只有把 SVG 代码直接贴进 HTML 才行。<img src="icon.svg"> 看似省事，但 document.querySelector("svg path") 一定返回 null——它根本不在当前 DOM 树里。
常见错误现象：.icon:hover path { fill: red } 完全无效；给 <img> 加了 class 却无法穿透样式到内部元素。
- 只保留从
<svg></svg>到的闭合块，删掉<?xml>、和所有注释 - 必须同时设置
width、height和viewBox，例如：<svg width="24" height="24" viewbox="0 0 24 24"></svg> - 删掉所有子元素（如
<path></path>）上的fill、stroke等内联属性，否则 CSS 无法覆盖 - 用
currentColor替代硬编码颜色：<path fill="currentColor" d="..."></path>，再通过父级color控制
<img> 引入适合纯静态图标，但路径和 MIME 类型必须正确
这是最轻量的方式，适合不需要交互的 logo、装饰性图标。但它本质就是一张“图片”，和 PNG 无异：不暴露内部结构、不响应 CSS 变量、JS 无法访问任何节点。
常见错误现象：本地双击打开 HTML 时 SVG 不显示；服务器返回 text/plain 而非 image/svg+xml；路径写错导致 404。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 路径以
index.html所在位置为基准，比如 SVG 在assets/icons/check.svg，就写src="assets/icons/check.svg" - 务必通过 HTTP 服务（如
http://localhost:5173）访问，本地文件协议file://下多数浏览器拒绝加载 SVG - 显式设置
width/height或style="max-width: 100%"，避免依赖 SVG 自带尺寸造成渲染异常 - 加
loading="lazy"防止阻塞首屏渲染，尤其用于列表中大量图标时
<object></object> 是折中方案，但跨域和 fallback 必须处理
当 SVG 较大、需复用、或内容由后端动态生成时，<object></object> 比内联更合理。它能加载外部文件，且允许 JS 访问内部 DOM（通过 contentDocument），也支持 title、aria-label 提升可访问性。
容易踩的坑：contentDocument 在跨域时为 null；IE11 对 <object></object> 渲染不稳定；父级 CSS 的 color 不会自动继承到 SVG 内部。
- 必须提供 fallback 内容（写在
<object></object>标签体内），例如：<img src="chart-fallback.png"> - JS 访问内部元素要等
load事件：obj.addEventListener("load", () => obj.contentDocument.querySelector("circle")) - 跨域 SVG（如 CDN 上的图标）无法读取
contentDocument，此时退化为仅视觉展示，无脚本能力 - 若需响应父级文字颜色，SVG 内部必须显式写
fill="currentColor"，不能指望 CSS 自动穿透
用 CSS background-image 适合装饰性用途，但不可语义化
适用于按钮背景、加载动画、平铺花纹等纯视觉场景。优势是能和渐变、阴影、filter 等叠加，也支持伪元素调用；缺点是屏幕阅读器无法识别，也无法添加 aria-label。
常见错误现象：SVG 显示模糊；重复平铺时出现缝隙；data URL 编码出错导致空白。
- 推荐用
background-size: contain或cover，避免拉伸失真 - data URL 方式需对 SVG 内容做 URL 编码，例如：
url("data:image/svg+xml,%3Csvg...%3C%2Fsvg%3E") - 不要在
background-image中尝试用 CSS 修改 SVG 内部颜色——它只是位图纹理，没有 DOM 结构 - 若需换色，只能准备多份 SVG 文件，或改用内联 +
currentColor方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
