Html 是否有一种与用于内嵌SVG的图像替换等效的技术

有一种方法可以实现用背景图像替换图像，但我发现自己越来越多地使用内嵌SVG，这主要是因为我可以用CSS操作其组件

然而，在像链接和标题这样的地方，文本内容对SEO很重要，SVG本身并不能解决这个问题。是否存在任何等效的技术，允许在不影响内联SVG的情况下，将标题或锚定中的文本可视化隐藏

---

注意：我知道Google确实索引SVG，但它似乎相当随意，即使是自由使用and。

我只能根据CSS-Tricks.com上Chris Coyier的这篇文章提出以下建议

首先，定义SVG

<!-- TEMPLATE -->
<svg width="100px" height="100px" viewBox="0 0 100 100" class="hardcore-hide">
  <circle id="template" cx="50" cy="50" r="50">
    </svg>

到目前为止，CSS看起来像这样

.hardcore-hide {
  display: none;
}

.circle {
  height: 100px;
  width: 100px;
}

body {
  padding: 1rem;
}

.logo {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border:1px solid grey;
  width:200px;
  height:100px;
  position: relative;
  display: inline-block;
}

.logo svg {
  position: absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
}

然后，您可以添加以下附加样式

.circle-1  svg {
  fill: red;
}
.circle-2 svg {
  fill: orange;
}
.circle-3  svg {
  fill: #f06d06;
}

---

我想你走错方向了。它应该被恰当地称为测试替换。你到底想做什么？移动文本并替换为背景SVG应该不是问题。您尝试过类似的方法吗？不过，这只是一个常规的图像/文本替换交易：*但是，我没有对svg做过太多的工作，因此它可能无法工作，只要图像是一个背景元素，它的工作原理基本相同。使用内联SVG会是一个更大的问题。不过这可能很有用：@Paulie_D Image Replacement是它的名字，我记得很久了。我的问题很清楚，我不是指使用背景图像。标题使用“内联SVG”一词。

.circle-1  svg {
  fill: red;
}
.circle-2 svg {
  fill: orange;
}
.circle-3  svg {
  fill: #f06d06;
}