CSS 在CSS中使用内联SVG

在本文中，我们将介绍如何在CSS中使用内联SVG。内联SVG是指将SVG代码嵌入到CSS样式表中，以便在网页中使用矢量图像。

阅读更多：CSS 教程

什么是内联SVG

内联SVG是一种使用CSS样式表中的SVG代码的方法。SVG是一种矢量图像格式，它使用XML表示图形，可以放大或缩小而不会失去清晰度。在过去，使用SVG图像需要将SVG代码嵌入到HTML文档中，但现在我们可以将SVG代码直接嵌入到CSS样式表中，以便在需要时使用。

在CSS中使用内联SVG的方法

在CSS中使用内联SVG的方法非常简单。我们只需将SVG代码写在url()函数中，并将该函数用作CSS属性的值。下面是一个简单的示例，展示了如何在CSS中使用内联SVG。

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 20l-6-6h12l-6 6zm0-16l6 6H6l6-6z'/%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
}

在上面的示例中，我们定义了一个名为icon的class，并将background-image属性的值设置为一个包含SVG代码的URL。SVG代码被编码为URL字符串，并以data:image/svg+xml开头。这种方法使得SVG代码可以直接嵌入到CSS样式表中，而不需要将其嵌入到HTML文档中。

SVG代码优化

在使用内联SVG时，我们需要注意代码的优化，以避免文件大小过大。以下是一些优化SVG代码的方法：

使用压缩工具：可以使用在线的SVG压缩工具，如SVGOMG或SVG Minifier，将SVG代码进行压缩，减小文件大小。
移除无用标签和属性：检查SVG代码中是否存在无用的标签和属性，并将其删除。这些无用的标签和属性可能是通过图形编辑器生成的，但并不影响SVG图像的显示。
使用CSS样式代替属性：通过将一些常见的属性移动到CSS样式表中，可以减小SVG代码的大小。例如，将fill属性移动到CSS样式表中，可以在多个图像之间共享该样式。

示例应用

下面是一个实际应用内联SVG的示例。假设我们想要在网页中使用一个带有购物车的图标，并在鼠标悬停时改变颜色。

首先，我们创建一个SVG文件，其中包含购物车图标的路径。然后，将SVG代码嵌入到CSS样式表中，并使用background-image属性将其应用于某个元素。

.cart-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 8v-.1c0-.55-.45-1-1-1h-3V5c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1H5c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V9h1c.55 0 1-.45 1-1zm-7 9H6v-2h6v2zm4 0h-2v-2h2v2zm1-10H6V7h11v2zm2-4H3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1H2v11c0 .55.45 1 1 1h18c.55 0 1-.45 1-1v-11h-1c-.55 0-1-.45-1-1V5c0-.55-.45-1-1-1zm-1 13H4v-9h14v9zM9 4h2v1H9V4zm4 0h2v1h-2V4z'/%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
}

.cart-icon:hover {
  background-color: yellow;
}