我可以使用带有背景属性内置数据的数据 uri 制作 svg 图标吗？

Question

我希望它看起来像这段代码的结果：

html {
  font-size: 16px;
}

.ico {
  display: inline-block;
}

.ico_size_s {
  width: 1.3rem;
  height: 1.3rem;
}

.ico_size_m {
  width: 2rem;
  height: 2rem;
}

.ico_first {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLjUxMi40NTMgNS40NzUgMTIuNDc4IDEuNzA4IDguMjguNjY3IDkuNjA1IDUuNjAzIDE1LjA2IDE0LjcyMiAxLjYxM3oiLz48L3N2Zz4K);
  background-color: yellow;
}

.ico_last {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQo8cGF0aCBkPSJNMTUsMGMtMC40NDYsMC0wLjcxOSwwLjM0NC0wLjkzOSwwLjY5OUw2LjgwNywxMy4zOTNsLTUuMS01LjFsMCwwQzEuNTI2LDguMTEyLDEuMjc2LDgsMSw4QzAuNDQ4LDgsMCw4LjQ0OCwwLDkNCgljMCwwLjI3NiwwLjExMiwwLjUyNiwwLjI5MywwLjcwN2w2LDZDNi40NzQsMTUuODg4LDYuNzI0LDE2LDcsMTZjMC40NDYsMCwwLjgxMi0wLjM0NCwwLjk4NC0wLjY5OWw3LjY3Mi0xMy41MDQNCglDMTUuNjU2LDEuNzk3LDE2LDEuMjY2LDE2LDFDMTYsMC40NDgsMTUuNTUyLDAsMTUsMHoiLz4NCjwvc3ZnPg0K);
  background-color: orange;
}

<i class="ico ico_first ico_size_s"></i>
<i class="ico ico_last ico_size_s"></i>

<hr />

<i class="ico ico_first ico_size_m"></i>
<i class="ico ico_last ico_size_m"></i>

这两个图标有两个不同的数据 uri。一个行为就像它具有以下属性：

background-repeat: no-repeat;
background-size: contain;
background-position: bottom;

怎么做到的？

Answer 1

如果您对第一个图标进行 Base64 解码，您将获得：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M13.512.453 5.475 12.478 1.708 8.28.667 9.605 5.603 15.06 14.722 1.613z"/>
</svg>

而解码第二个给出：

<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
  <path d="M15,0c-0.446,0-0.719,0.344-0.939,0.699L6.807,13.393l-5.1-5.1l0,0C1.526,8.112,1.276,8,1,8C0.448,8,0,8.448,0,9
c0,0.276,0.112,0.526,0.293,0.707l6,6C6.474,15.888,6.724,16,7,16c0.446,0,0.812-0.344,0.984-0.699l7.672-13.504
C15.656,1.797,16,1.266,16,1C16,0.448,15.552,0,15,0z"/>

请注意，第二个为 SVG 指定了 width 和 height of "16px"。这意味着无论如何它都会以那个尺寸绘制。因此，当它用作背景图像时，如果容器的宽度或高度大于 16px，它就会重复。

第一个图标未指定 width 或 height。所以这些属性默认为“100%”。这意味着图标会缩放以适合容器。

我可以使用带有背景属性内置数据的数据 uri 制作 svg 图标吗？

Can I to make svg icon using data-uri with built-in data for the properties of the background?

svg

data-uri