第21天：如何在CSS中内联SVG在许多情况下，内联SVG在HTML中感觉像是一些噪声。如果我们添加一个图标，那么图标本

在许多情况下，内联SVG在HTML中感觉像是一些噪声。如果我们添加一个图标，那么图标本身感觉更像是样式，而不是DOM结构的一部分。好消息是，我们可以将SVG图像完全转移到CSS中。

例如，在HTML中，关闭按钮只是一个带有类的锚元素：

<a href="/" class="close"></a>

在CSS中，我们可以设置一个 background-image 属性。对于这个CSS属性，我们通常提供一个指向图像的链接，但我们也可以内联一个SVG：

.close {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: gray;

  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 100 100'><path d='M 30 30 L 70 70 M 30 70 L 70 30' stroke='white' stroke-width='10' /></svg>");
}

当我们在CSS中内联SVG时，我们需要设置XML命名空间属性。前面我们将SVG内联到HTML中，在这种情况下，它是可选的。在CSS中，我们必须设置 xmlns 属性。