如何在网页中嵌入SVG并保留文本可高亮特性？

当使用<img>标签嵌入SVG时，浏览器会将其渲染为位图图像，而非可交互的矢量内容，因此无法选中或高亮其中的文本。以下是几种可行的替代方案：

方案1：使用<object>标签嵌入SVG #

替换<img>标签为<object>，浏览器会解析SVG的内部结构，保留文本的可选中特性：

<object id="foo" data="bar.svg" width="100%" type="image/svg+xml"></object>

方案2：使用<embed>标签嵌入SVG #

<embed>标签同样能让浏览器识别SVG的矢量属性，支持文本高亮：

<embed id="foo" src="bar.svg" width="100%" type="image/svg+xml">

方案3：直接内嵌SVG代码到HTML中 #

将SVG的完整代码直接复制粘贴到HTML文件里，这种方式不仅支持文本高亮，还能直接通过CSS或JS修改SVG内容：

<!-- 直接把SVG代码放在HTML里 -->
<svg width="100%" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50" font-size="20">可高亮的文本</text>
</svg>

注意：以上方案都要求SVG文件本身未被转换为位图格式（比如导出时不要选择PNG/JPG等），确保SVG保留原始的<text>元素结构。

内容的提问来源于stack exchange，提问作者Matthew