如何获取内联 SVG 代码作为背景图像？

Question

我有从 illustrator 导出的内联 svg 代码，我将其用作背景图像的叠加层。我需要某些元素对齐，因此两者都需要同等缩放，并且我需要将 svg 保留为代码，因为某些元素将变为动画。

我先把SVG代码通过SVGOMG： https://jakearchibald.github.io/svgomg/

然后我将它通过编码器转换为 base64： https://yoksel.github.io/url-encoder/

通过任何研究，我发现这就是 svg 代码如何表现得像背景图像，但是我最终得到的代码无法成功插入到背景图像中属性。这是一些示例代码：

html:

<div id="mainSVG"></div>

scss:

#mainSVG{
background-position: center;
background-size: cover;
background-image: url("data:image/svg+xml,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8ZyBpZD0ib3ZhbCI+DQogICAgPHBhdGggZD0iTTEwMzQuNSA3NjYuNWMtMTY1LjQgMC0zMjAuOS0yOS42My00MzcuODQtODMuNDMtNTYuODMtMjYuMTUtMTAxLjQ1LTU2LjU5LTEzMi42LTkwLjQ3LTMyLjIyLTM1LjA0LTQ4LjU1LTcyLjI1LTQ4LjU1LTExMC42czE2LjMzLTc1LjU2IDQ4LjU1LTExMC42YzMxLjE2LTMzLjg5IDc1Ljc3LTY0LjMzIDEzMi42LTkwLjQ3IDExNi45NC01My44IDI3Mi40NC04My40MyA0MzcuODQtODMuNDMgMTY1LjQgMCAzMjAuOSAyOS42MyA0MzcuODQgODMuNDMgNTYuODMgMjYuMTUgMTAxLjQ1IDU2LjU5IDEzMi42IDkwLjQ3IDMyLjIyIDM1LjA0IDQ4LjU1IDcyLjI1IDQ4LjU1IDExMC42cy0xNi4zMyA3NS41Ni00OC41NSAxMTAuNmMtMzEuMTYgMzMuODktNzUuNzcgNjQuMzMtMTMyLjYgOTAuNDctMTE2Ljk0IDUzLjgtMjcyLjQ0IDgzLjQzLTQzNy44NCA4My40M3oiLz4NCiAgICA8cGF0aCBkPSJNMTAzNC41IDE5OGM4My41NyAwIDE2NC42MyA3LjUzIDI0MC45NSAyMi4zOCA3My42OSAxNC4zNCAxMzkuODcgMzQuODYgMTk2LjY5IDYxIDU2Ljc3IDI2LjEyIDEwMS4zMyA1Ni41MiAxMzIuNDUgOTAuMzZDMTYzNi43MSA0MDYuNjkgMTY1MyA0NDMuNzggMTY1MyA0ODJzLTE2LjI5IDc1LjMxLTQ4LjQyIDExMC4yNmMtMzEuMTEgMzMuODQtNzUuNjcgNjQuMjQtMTMyLjQ1IDkwLjM2LTU2LjgyIDI2LjE0LTEyMyA0Ni42Ny0xOTYuNjkgNjEtNzYuMzEgMTQuODUtMTU3LjM3IDIyLjM4LTI0MC45NCAyMi4zOHMtMTY0LjYzLTcuNTMtMjQwLjk1LTIyLjM4Yy03My42OS0xNC4zNC0xMzkuODctMzQuODYtMTk2LjY5LTYxLTU2Ljc3LTI2LjEyLTEwMS4zMy01Ni41Mi0xMzIuNDUtOTAuMzZDNDMyLjI5IDU1Ny4zMSA0MTYgNTIwLjIyIDQxNiA0ODJzMTYuMjktNzUuMzEgNDguNDItMTEwLjI2YzMxLjExLTMzLjg0IDc1LjY3LTY0LjI0IDEzMi40NS05MC4zNiA1Ni44Mi0yNi4xNCAxMjMtNDYuNjcgMTk2LjY5LTYxQzg2OS44NyAyMDUuNTMgOTUwLjkzIDE5OCAxMDM0LjUgMTk4bTAtMUM2OTIuMzYgMTk3IDQxNSAzMjQuNiA0MTUgNDgyczI3Ny4zNiAyODUgNjE5LjUgMjg1UzE2NTQgNjM5LjQgMTY1NCA0ODJzLTI3Ny4zNi0yODUtNjE5LjUtMjg1eiIvPg0KICA8L2c+DQogIDxnIGlkPSJyZWN0YW5nbGUiPg0KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MzkuNSAzMTkuNWg1OTB2MzI2aC01OTB6Ii8+DQogICAgPHBhdGggZD0iTTEzMjkgMzIwdjMyNUg3NDBWMzIwaDU4OW0xLTFINzM5djMyN2g1OTFWMzE5eiIvPg0KICA8L2c+DQo8L3N2Zz4=");}

还尝试将标准 svg 代码放入 html 文件，然后使用 object-fit 和 object-position 属性，但我想这只适用于 img 和 video 标签？

我确定我在这里遗漏了一些东西。还是初学者，请多多包涵。

Answer 1

也许这会对你有所帮助：

https://codepen.io/netsi1964/pen/HGJms

   <div class="bg"></div>

   .bg {
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
      height: 50px;
      width: 50px;
}

Answer 2

您快完成了，但忘记指定 data-uri 的编码，以及 <div>:

的 width 和 height

#mainSVG {
  width: 200px;
  height: 100px;
  background-position: center;
  background-size: cover;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8ZyBpZD0ib3ZhbCI+DQogICAgPHBhdGggZD0iTTEwMzQuNSA3NjYuNWMtMTY1LjQgMC0zMjAuOS0yOS42My00MzcuODQtODMuNDMtNTYuODMtMjYuMTUtMTAxLjQ1LTU2LjU5LTEzMi42LTkwLjQ3LTMyLjIyLTM1LjA0LTQ4LjU1LTcyLjI1LTQ4LjU1LTExMC42czE2LjMzLTc1LjU2IDQ4LjU1LTExMC42YzMxLjE2LTMzLjg5IDc1Ljc3LTY0LjMzIDEzMi42LTkwLjQ3IDExNi45NC01My44IDI3Mi40NC04My40MyA0MzcuODQtODMuNDMgMTY1LjQgMCAzMjAuOSAyOS42MyA0MzcuODQgODMuNDMgNTYuODMgMjYuMTUgMTAxLjQ1IDU2LjU5IDEzMi42IDkwLjQ3IDMyLjIyIDM1LjA0IDQ4LjU1IDcyLjI1IDQ4LjU1IDExMC42cy0xNi4zMyA3NS41Ni00OC41NSAxMTAuNmMtMzEuMTYgMzMuODktNzUuNzcgNjQuMzMtMTMyLjYgOTAuNDctMTE2Ljk0IDUzLjgtMjcyLjQ0IDgzLjQzLTQzNy44NCA4My40M3oiLz4NCiAgICA8cGF0aCBkPSJNMTAzNC41IDE5OGM4My41NyAwIDE2NC42MyA3LjUzIDI0MC45NSAyMi4zOCA3My42OSAxNC4zNCAxMzkuODcgMzQuODYgMTk2LjY5IDYxIDU2Ljc3IDI2LjEyIDEwMS4zMyA1Ni41MiAxMzIuNDUgOTAuMzZDMTYzNi43MSA0MDYuNjkgMTY1MyA0NDMuNzggMTY1MyA0ODJzLTE2LjI5IDc1LjMxLTQ4LjQyIDExMC4yNmMtMzEuMTEgMzMuODQtNzUuNjcgNjQuMjQtMTMyLjQ1IDkwLjM2LTU2LjgyIDI2LjE0LTEyMyA0Ni42Ny0xOTYuNjkgNjEtNzYuMzEgMTQuODUtMTU3LjM3IDIyLjM4LTI0MC45NCAyMi4zOHMtMTY0LjYzLTcuNTMtMjQwLjk1LTIyLjM4Yy03My42OS0xNC4zNC0xMzkuODctMzQuODYtMTk2LjY5LTYxLTU2Ljc3LTI2LjEyLTEwMS4zMy01Ni41Mi0xMzIuNDUtOTAuMzZDNDMyLjI5IDU1Ny4zMSA0MTYgNTIwLjIyIDQxNiA0ODJzMTYuMjktNzUuMzEgNDguNDItMTEwLjI2YzMxLjExLTMzLjg0IDc1LjY3LTY0LjI0IDEzMi40NS05MC4zNiA1Ni44Mi0yNi4xNCAxMjMtNDYuNjcgMTk2LjY5LTYxQzg2OS44NyAyMDUuNTMgOTUwLjkzIDE5OCAxMDM0LjUgMTk4bTAtMUM2OTIuMzYgMTk3IDQxNSAzMjQuNiA0MTUgNDgyczI3Ny4zNiAyODUgNjE5LjUgMjg1UzE2NTQgNjM5LjQgMTY1NCA0ODJzLTI3Ny4zNi0yODUtNjE5LjUtMjg1eiIvPg0KICA8L2c+DQogIDxnIGlkPSJyZWN0YW5nbGUiPg0KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MzkuNSAzMTkuNWg1OTB2MzI2aC01OTB6Ii8+DQogICAgPHBhdGggZD0iTTEzMjkgMzIwdjMyNUg3NDBWMzIwaDU4OW0xLTFINzM5djMyN2g1OTFWMzE5eiIvPg0KICA8L2c+DQo8L3N2Zz4=");
}

<div id="mainSVG"></div>

您也可以将 SVG 用作 HTML <svg> 元素：

#mainSVG {
  width: 200px;
  height: 100px;
}

<div id="mainSVG">
  <svg viewBox="0 0 1920 1080">
  <g id="oval">
    <path d="M1034.5 766.5c-165.4 0-320.9-29.63-437.84-83.43-56.83-26.15-101.45-56.59-132.6-90.47-32.22-35.04-48.55-72.25-48.55-110.6s16.33-75.56 48.55-110.6c31.16-33.89 75.77-64.33 132.6-90.47 116.94-53.8 272.44-83.43 437.84-83.43 165.4 0 320.9 29.63 437.84 83.43 56.83 26.15 101.45 56.59 132.6 90.47 32.22 35.04 48.55 72.25 48.55 110.6s-16.33 75.56-48.55 110.6c-31.16 33.89-75.77 64.33-132.6 90.47-116.94 53.8-272.44 83.43-437.84 83.43z"/>
    <path d="M1034.5 198c83.57 0 164.63 7.53 240.95 22.38 73.69 14.34 139.87 34.86 196.69 61 56.77 26.12 101.33 56.52 132.45 90.36C1636.71 406.69 1653 443.78 1653 482s-16.29 75.31-48.42 110.26c-31.11 33.84-75.67 64.24-132.45 90.36-56.82 26.14-123 46.67-196.69 61-76.31 14.85-157.37 22.38-240.94 22.38s-164.63-7.53-240.95-22.38c-73.69-14.34-139.87-34.86-196.69-61-56.77-26.12-101.33-56.52-132.45-90.36C432.29 557.31 416 520.22 416 482s16.29-75.31 48.42-110.26c31.11-33.84 75.67-64.24 132.45-90.36 56.82-26.14 123-46.67 196.69-61C869.87 205.53 950.93 198 1034.5 198m0-1C692.36 197 415 324.6 415 482s277.36 285 619.5 285S1654 639.4 1654 482s-277.36-285-619.5-285z"/>
  </g>
  <g id="rectangle">
    <path fill="#fff" d="M739.5 319.5h590v326h-590z"/>
    <path d="M1329 320v325H740V320h589m1-1H739v327h591V319z"/>
  </g>
</svg>
</div>

或 <img> 使用您的 SVG 文件路径或数据 uri 的 src:

<img width="200" height="100" src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8ZyBpZD0ib3ZhbCI+DQogICAgPHBhdGggZD0iTTEwMzQuNSA3NjYuNWMtMTY1LjQgMC0zMjAuOS0yOS42My00MzcuODQtODMuNDMtNTYuODMtMjYuMTUtMTAxLjQ1LTU2LjU5LTEzMi42LTkwLjQ3LTMyLjIyLTM1LjA0LTQ4LjU1LTcyLjI1LTQ4LjU1LTExMC42czE2LjMzLTc1LjU2IDQ4LjU1LTExMC42YzMxLjE2LTMzLjg5IDc1Ljc3LTY0LjMzIDEzMi42LTkwLjQ3IDExNi45NC01My44IDI3Mi40NC04My40MyA0MzcuODQtODMuNDMgMTY1LjQgMCAzMjAuOSAyOS42MyA0MzcuODQgODMuNDMgNTYuODMgMjYuMTUgMTAxLjQ1IDU2LjU5IDEzMi42IDkwLjQ3IDMyLjIyIDM1LjA0IDQ4LjU1IDcyLjI1IDQ4LjU1IDExMC42cy0xNi4zMyA3NS41Ni00OC41NSAxMTAuNmMtMzEuMTYgMzMuODktNzUuNzcgNjQuMzMtMTMyLjYgOTAuNDctMTE2Ljk0IDUzLjgtMjcyLjQ0IDgzLjQzLTQzNy44NCA4My40M3oiLz4NCiAgICA8cGF0aCBkPSJNMTAzNC41IDE5OGM4My41NyAwIDE2NC42MyA3LjUzIDI0MC45NSAyMi4zOCA3My42OSAxNC4zNCAxMzkuODcgMzQuODYgMTk2LjY5IDYxIDU2Ljc3IDI2LjEyIDEwMS4zMyA1Ni41MiAxMzIuNDUgOTAuMzZDMTYzNi43MSA0MDYuNjkgMTY1MyA0NDMuNzggMTY1MyA0ODJzLTE2LjI5IDc1LjMxLTQ4LjQyIDExMC4yNmMtMzEuMTEgMzMuODQtNzUuNjcgNjQuMjQtMTMyLjQ1IDkwLjM2LTU2LjgyIDI2LjE0LTEyMyA0Ni42Ny0xOTYuNjkgNjEtNzYuMzEgMTQuODUtMTU3LjM3IDIyLjM4LTI0MC45NCAyMi4zOHMtMTY0LjYzLTcuNTMtMjQwLjk1LTIyLjM4Yy03My42OS0xNC4zNC0xMzkuODctMzQuODYtMTk2LjY5LTYxLTU2Ljc3LTI2LjEyLTEwMS4zMy01Ni41Mi0xMzIuNDUtOTAuMzZDNDMyLjI5IDU1Ny4zMSA0MTYgNTIwLjIyIDQxNiA0ODJzMTYuMjktNzUuMzEgNDguNDItMTEwLjI2YzMxLjExLTMzLjg0IDc1LjY3LTY0LjI0IDEzMi40NS05MC4zNiA1Ni44Mi0yNi4xNCAxMjMtNDYuNjcgMTk2LjY5LTYxQzg2OS44NyAyMDUuNTMgOTUwLjkzIDE5OCAxMDM0LjUgMTk4bTAtMUM2OTIuMzYgMTk3IDQxNSAzMjQuNiA0MTUgNDgyczI3Ny4zNiAyODUgNjE5LjUgMjg1UzE2NTQgNjM5LjQgMTY1NCA0ODJzLTI3Ny4zNi0yODUtNjE5LjUtMjg1eiIvPg0KICA8L2c+DQogIDxnIGlkPSJyZWN0YW5nbGUiPg0KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MzkuNSAzMTkuNWg1OTB2MzI2aC01OTB6Ii8+DQogICAgPHBhdGggZD0iTTEzMjkgMzIwdjMyNUg3NDBWMzIwaDU4OW0xLTFINzM5djMyN2g1OTFWMzE5eiIvPg0KICA8L2c+DQo8L3N2Zz4=">

如何获取内联 SVG 代码作为背景图像？

How can I get inline SVG code to act as a background image?

html

css

base64

svg