使用 标签（而非 ）嵌入 SVG，可保留原生文本的可选中、可复制、可缩放特性，同时支持 CSS 样式与 DOM 交互。
使用 `
当开发者希望在网页中展示矢量图形并保持其中文字的可访问性（如高亮、复制、屏幕阅读器识别、响应式缩放），直接使用 
是常见但错误的选择——它会将整个 SVG 当作位图渲染，切断文本节点与文档对象模型（DOM）的连接，导致文字“不可见”于浏览器选择机制。
正确的方式是采用
<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50" width="100%" height="auto"> <rect width="100" height="50" fill="orange" /> <text x="50" y="25" text-anchor="middle" dominant-baseline="middle" font-size="14" fill="SteelBlue">Hello World!</text> </svg>
将其通过
<object data="hello.svg" type="image/svg+xml" width="300" height="150" aria-label="欢迎标语：Hello World!"></object>
✅ 优势包括：
- 文本完全可选中、可复制、可搜索；
- 支持 CSS 样式（需在 SVG 内联定义或通过
- 可通过 JavaScript 访问内部 DOM（如 obj.contentDocument.querySelector('text')）；
- 保留无障碍属性（如 aria-label、title、desc）；
- 响应式缩放不失真。
⚠️ 注意事项：
-
避免
或 CSS background-image：二者均剥离 SVG 的 DOM 结构，文本退化为图形路径；
- 慎用 Base64 内联（如 data:image/svg+xml;base64,...）：虽可行，但降低可维护性、无法缓存、且需手动转义特殊字符（推荐优先使用外部文件引用）；
- 设置 type="image/svg+xml"：显式声明 MIME 类型，提升兼容性与语义清晰度；
- 提供降级内容（fallback）：在
- 确保 SVG 文件编码为 UTF-8 且无 BOM，防止解析失败导致空白显示。
总结：若 SVG 中含关键文本信息（如图表标签、说明文字、图标文字），务必使用
