如何在 css 文件中使用 SVG？

Question

我想知道是否可以将 SVG 代码添加到 CSS 文件并使用 HTMl 调用它。我的意思是：

HTML：

   <div class="svg_gift"></div>

CSS：

  .svg_gift:<svg viewBox="0 0 40 40"><path class="st0" d="M38.1,10.6h-9.9c1.2-1,2-2.5,2-4.2c0-3-2.4-5.4-5.4-5.4c-2.4,0-4.5,1.6-5.2,3.8c-0.8-1-2-1.6-3.4-1.6c-2.4,0-4.3,1.9-4.3,4.3c0,1.2,0.5,2.3,1.3,3.1H1.9c-1,0-1.8,0.8-1.8,1.8V16c0,1,0.8,1.8,1.8,1.8v18.7c0,1,0.8,1.8,1.8,1.8h14.6h3.3h14.6c1,0,1.8-0.8,1.8-1.8V17.8c1,0,1.8-0.8,1.8-1.8v-3.6C39.9,11.4,39.1,10.6,38.1,10.6z M20.6,6.4c0-2.3,1.9-4.2,4.2-4.2c2.3,0,4.2,1.9,4.2,4.2c0,2.3-1.9,4.2-4.2,4.2h-3.2h-1V7.5V6.4z M21,16.6h-2.1v-4.8H20H21V16.6z M13.2,7.5c0-1.7,1.4-3.1,3.1-3.1c1.7,0,3.1,1.4,3.1,3.1v3.1h-1.1h-2.1C14.6,10.6,13.2,9.2,13.2,7.5z M1.3,16v-3.6c0-0.3,0.3-0.6,0.6-0.6h14.4h1.5v4.8H2.5H1.9C1.6,16.6,1.3,16.4,1.3,16z M3.1,36.5V17.8h14.6v19.3h-14C3.4,37.1,3.1,36.8,3.1,36.5z M18.9,37.1V17.8H21v19.3H18.9z M36.9,36.5c0,0.3-0.3,0.6-0.6,0.6h-14V17.8h14.6V36.5z M38.7,16c0,0.3-0.3,0.6-0.6,0.6h-0.6H22.3v-4.8h2.6h13.3c0.3,0,0.6,0.3,0.6,0.6V16z"/></svg>

Answer 1

有several ways 可以包含和显示 SVG 文件。您可以在 CSS 中将 SVG 用作 background-image。

在 CSS 中包含外部 SVG 文件

在 CSS 中显示 SVG 的最简单方法是将 SVG 保存为单独的文件，并将其用作 CSS 中的背景，如下所示。

.svg_gift{
    background-image: url(your-path-to-svg.svg);
}

看看这个sn-p

.svg_gift{
  width: 300px;
  height: 300px;
  background-image: url(https://placeholder.pics/svg/300);
}

<div class="svg_gift"></div>

Refer more here

---

在 CSS 中直接包含 SVG

正如 cmets SVG 代码中提到的 @Kunal Tanwar 一样，可以通过 SVG URL Encoder 和类似工具将其编码为 data-uri。粘贴您的 SVG 代码，您可以简单地获取要使用的 CSS 代码。

这是一个例子。

.svg_gift{
  width: 300px;
  height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath class='st0' d='M38.1,10.6h-9.9c1.2-1,2-2.5,2-4.2c0-3-2.4-5.4-5.4-5.4c-2.4,0-4.5,1.6-5.2,3.8c-0.8-1-2-1.6-3.4-1.6c-2.4,0-4.3,1.9-4.3,4.3c0,1.2,0.5,2.3,1.3,3.1H1.9c-1,0-1.8,0.8-1.8,1.8V16c0,1,0.8,1.8,1.8,1.8v18.7c0,1,0.8,1.8,1.8,1.8h14.6h3.3h14.6c1,0,1.8-0.8,1.8-1.8V17.8c1,0,1.8-0.8,1.8-1.8v-3.6C39.9,11.4,39.1,10.6,38.1,10.6z M20.6,6.4c0-2.3,1.9-4.2,4.2-4.2c2.3,0,4.2,1.9,4.2,4.2c0,2.3-1.9,4.2-4.2,4.2h-3.2h-1V7.5V6.4z M21,16.6h-2.1v-4.8H20H21V16.6z M13.2,7.5c0-1.7,1.4-3.1,3.1-3.1c1.7,0,3.1,1.4,3.1,3.1v3.1h-1.1h-2.1C14.6,10.6,13.2,9.2,13.2,7.5z M1.3,16v-3.6c0-0.3,0.3-0.6,0.6-0.6h14.4h1.5v4.8H2.5H1.9C1.6,16.6,1.3,16.4,1.3,16z M3.1,36.5V17.8h14.6v19.3h-14C3.4,37.1,3.1,36.8,3.1,36.5z M18.9,37.1V17.8H21v19.3H18.9z M36.9,36.5c0,0.3-0.3,0.6-0.6,0.6h-14V17.8h14.6V36.5z M38.7,16c0,0.3-0.3,0.6-0.6,0.6h-0.6H22.3v-4.8h2.6h13.3c0.3,0,0.6,0.3,0.6,0.6V16z'/%3E%3C/svg%3E");
}

<div class="svg_gift"></div>